vue3+element-plus的el-table懒加载子节点的刷新

1,455 阅读1分钟

网上资料缺乏,自己瞎捣鼓了一通,测试通过。

场景:懒加载lazy的情况下,如何刷新子节点数据?

<el-table

ref="mytable"

:data="data"

row-key="id"这行不可缺少

lazy

:load="load"

:tree-props="{hasChildren: 'haschildren'}"

>

新增子节点后,如何自动展开父节点并展示新增的子节点?

点击【新增分期】按钮,触发下面方法

function Create(row) {

   。。。。。。

   //不管父节点之前有没有加载过数据,重置父节点

   mytable.value.store.states.treeData.value[row.id].loaded = false;

   //加载数据并展开父节点

   mytable.value.store.loadOrToggle(row);

}

删除子节点后,如何刷新页面?

function Delete(row) {

。。。。。。

//重置父节点

mytable.value.store.states.treeData.value[row.fatherid].loaded = false;

//遍历所有父节点,找到当前删除项的父节点,并刷新

data.value.forEach((item) => {

    if (item.Tdid === row.fatherid) {

        //找到父节点并刷新数据

        mytable.value.store.loadOrToggle(item);

    }

    });

}

希望能帮助到你