element-ui的树形表格el-table懒加载lazy子节点修改数据后局部刷新-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui的树形表格el-table懒加载lazy子节点修改数据后局部刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在使用element-ui的树形表格(el-table)懒加载(lazy)，并使用了懒加载，出现了一个问题，在对当前节点添加、修改、删除一个子节点数据时，当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供子节点修改数据后局部刷新方法。文章来源地址https://www.toymoban.com/news/detail-527469.html

<el-table
    v-loading="loading"
    row-key="id"
    :data="dataList"
    lazy
    :load="load"
    ref="table"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    ......
</el-table>
<!--删除按钮-->
<el-button
    type="text"
    style="color: #ff6d6d"
    @click="delete(row)">
    删除
</el-button

>

首先，在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);
        }
    }
}

到了这里，关于element-ui的树形表格el-table懒加载lazy子节点修改数据后局部刷新的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！