在使用element-ui的树形表格(el-table)懒加载(lazy)，并使用了懒加载，出现了一个问题，在对当前节点添加、修改、删除一个子节点数据时，当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供子节点修改数据后局部刷新方法。
v-loading="loading" row-key="id" :data="dataList" lazy :load="load" ref="table" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> ...... type="text" style="color: #ff6d6d" @click="delete(row)"> 删除 > 首先，在data(){}中定义一个maps:new Map(); data(){ return(){ maps: new Map(), dataList: [] } } 然后，当数据进行懒加载时把点击的节点数据存储在map中，点击删除时再从map中获取节点数据，进行数据刷新操作。 methods:{ // 懒加载 load(tree, treeNode, resolve) { // getData()是懒加载获取数据的方法 this.getData(tree, resolve); // 接下来是map的set存储 // -- key值是点击节点的id // -- value是load接收的参{tree,treeNode,resolve} this.maps.set(tree.id, { tree, treeNode, resolve }) }, // 懒加载动态获取数据 getData(tree, resolve){ let { data: res } = await this.$http.get('sys/getList', { params: { id: tree.id } }) if (!res.data) { return } resolve( res.data.map((item) => { return { ...item } }) ) }, // 删除方法 delete(row){ this.refreshLoad(item.parentId) }, // 获取map中的数据，重新加载 refreshLoad(parentId){ // 根据父级ID取出对应节点数据 const { tree, treeNode, resolve } = this.maps.get(parentId) // 根据父节点id更新子节点数据 // -- 先给table标签添加一个ref="table1" // -- parentId: 就是父节点的ID // -- []：就是子节点的数据 this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, []) if (tree) { // 将取出对应数据再传给load方法，重新加载数据。 this.load(tree, treeNode, resolve); } } } 推荐文章
您阅读本篇文章共花了：
发表评论