elementui懒加载如何反显（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" border lazy :load="load" :tree-props="{children: children, hasChildren: hasChildren}"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div> </template> <script> export default { 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中添加全局变量
代码如下（示例）：
export default { data() { return { // 存储操作的DOM数据 thisTabeDom: Object, tableData: [{}] } } }2.在对应的操作中给thisTabeDom赋值
代码如下（示例）：
<el-button icon="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还是当前ID let 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懒加载子节点 await this.$emit("addCallback", false); this.$message.success("修改成功"); } else { //新增 await organApi.add({ name: this.menuForm.label, pid: this.menuForm.pid? this.menuForm.pid: 0, }); // 回调 ，false 表示通过当前ID懒加载子节点 await this.$emit("addCallback", true); this.$message.success("新增成功"); } this.onClose(); } }); },总结
希望之篇文章对大家有所帮助 方法实现 Debug el-table的懒加载
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！