el-table懒加载，修改数据局部加载懒加载数据(el-table懒加载合并行)

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

推荐整理分享el-table懒加载，修改数据局部加载懒加载数据(el-table懒加载合并行)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:eltable懒加载 查询功能,el-table懒加载数据,eltable懒加载数据,el-table懒加载数据,eltable懒加载 查询功能,eltable懒加载数据,eltable懒加载局部刷新,eltable懒加载局部刷新,内容如对您有帮助，希望把文章链接给更多的朋友！

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

文章目录前言一、在el-table中开启懒加载二、进行改造1.在data中添加全局变量2.在对应的操作中给`thisTabeDom`赋值3.编写回调方法`tabeDomCallback`4.对话框操作后进行方法回调总结前言

看着标题是不是有点绕，这里的需求是使用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-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还是当前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的懒加载