el-table懒加载，修改数据局部加载懒加载数据

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

看着标题是不是有点绕，这里的需求是使用el-table的懒加载，加载数据后，修改懒加载后的数据时不进行全局的刷新，而是只操作当前懒加载的数据，

比如一级是真实的数据，二级是懒加载的数据，当二级的某条数据进行了修改后，只让当前的二级菜单重新向后台请求数据，进行刷新得到最新的数据

一、在el-table中开启懒加载

支持树类型的数据的显示。当 row 中包含

children 

字段时，被视为树形数据。渲染树形数据时，必须要指定

row-key

。支持子节点数据异步加载。设置 Table 的

lazy

属性为 true 与加载函数

load

。通过指定 row 中的

hasChildren

字段来指定哪些行是包含子节点。

children

与

hasChildren

都可以通过

tree-props

配置。

<el-table:data="tableData"style="width: 100%"row-key="id"borderlazy:load="load":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div></template><script>exportdefault{data(){return{thisTabeDom: Object,tableData:[{id:1,date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路 1518 弄'},{id:2,date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路 1517 弄'},{id:3,date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路 1519 弄',hasChildren:true},{id:4,date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路 1516 弄'}]}},methods:{load(tree, treeNode, resolve){setTimeout(()=>{resolve([{id:31,pid:3,date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路 1519 弄'},{id:32,pid:3,date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路 1519 弄'}])},1000)}},}</script>

二、进行改造

1.在data中添加全局变量

代码如下（示例）：

exportdefault{data(){return{// 存储操作的DOM数据thisTabeDom: Object,tableData:[{}]}}}

2.在对应的操作中给

thisTabeDom

赋值

代码如下（示例）：

<el-buttonicon="el-icon-edit"type="primary"size="mini"@click="handleDialogForm(scope)">
编辑
</el-button><!-- 编辑/新增弹出框 --><dialog-formBox:visible.sync="dialogFormVisible":menuInrForm="this.menuForm"@addCallback="tabeDomCallback"></dialog-formBox>

/**
 * 新增、编辑
 */handleDialogForm(box){// 将操作的scope保存在全局变量中this.thisTabeDom = box
  console.log(box);if(box.row && box.row.id){this.menuForm ={...box.row };}else{this.menuForm ={};}// 显示el-dialog对话框进行数据修改操作this.dialogFormVisible =true;},

3.编写回调方法

tabeDomCallback

代码如下（示例）：

// 修改回调tabeDomCallback(val){
  console.log(val);
  console.log(this.thisTabeDom.row);var states =this.thisTabeDom.store.states
  var treeData = states.treeData
  // 判断获取的ID是父ID还是当前IDlet id = val ?this.thisTabeDom.row.id :this.thisTabeDom.row.pid
  let data = treeData[id]let teb ='loaded'in data
  // 如果对象中没有loaded字段，则表示修改的数据不是懒加载的if(!teb){// 调用列表刷新this.getList()
    console.log('回调结束,刷新列表');return}// 将懒加载数据标志改为false
  treeData[id].loaded =false// 调用组件内部的方法加载数据 间接调用懒加载方法this.thisTabeDom.store.loadOrToggle({id})
  console.log('回调结束,刷新DOM');},

4.对话框操作后进行方法回调

代码如下（示例）：

/**
 * 确认提交
 */confirm(){this.$refs.menuForm.validate(async(valid)=>{if(valid){//编辑if(this.menuForm &&this.menuForm.id){await organApi.update({id:this.menuForm.id,name:this.menuForm.name,});// 回调，false 表示通过父ID懒加载子节点awaitthis.$emit("addCallback",false);this.$message.success("修改成功");}else{//新增await organApi.add({name:this.menuForm.label,pid:this.menuForm.pid?this.menuForm.pid:0,});// 回调，false 表示通过当前ID懒加载子节点awaitthis.$emit("addCallback",true);this.$message.success("新增成功");}this.onClose();}});},

总结

**

希望之篇文章对大家有所帮助

**
方法实现

Debug

el-table的懒加载