element-ui table树形数据,懒加载,删除子节点后的刷新节点

最新推荐文章于 2024-06-24 14:45:43 发布

拳击俱乐部

最新推荐文章于 2024-06-24 14:45:43 发布

阅读量2.1k

点赞数

分类专栏： Vue element el-table 文章标签： vue elementui javascript js vue.js

本文链接：https://blog.csdn.net/qq_42483780/article/details/115624566

版权

Vue 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

element

5 篇文章 0 订阅

订阅专栏

el-table

1 篇文章 0 订阅

订阅专栏

这种需要删除功能的树形数据懒加载，调用删除接口重新给table赋值会发现被折叠的行数据没有被删除，需要刷新一下页面才可以删除。这种可以采用下面的方法进行删除。
在这里插入图片描述

//点击删除按钮的删除方法item为行数据
deleteLazyTableItem (item) {
                const store = this.$refs.table.store;              
                if (item.parent != -1) {
                //查找父级 找到返回item 否则返回undefined
                    let parentRow = store.states.data.find(child => child.id == item.parent);
                    if (!parentRow) {
                        const keys = Object.keys(store.states.lazyTreeNodeMap);
                        for (let i = 0; i < keys.length; i++) {
                            parentRow = store.states.lazyTreeNodeMap[keys[i]].find(child => child.id == item.parent);
                            if (parentRow) {
                                break;
                            }
                        }
                    }
                    parentRow.childrenCount--;
                    const parent = store.states.lazyTreeNodeMap[item.parent];
                    const index = parent.findIndex(child => child.id == item.id);
                    parent.splice(index, 1);
                }
                else {
                    const parent = store.states.data;
                    const index = parent.findIndex(child => child.id == item.id);
                    parent.splice(index, 1);
                }
            },