Vue3 + elder-Plus’s el-table lazily loads a refresh of child nodes

Lack of information on the net, oneself tampered with a pass, test.

Scenario: How do I refresh data on child nodes when lazy loading is performed?

<el-table

ref=”mytable”

:data=”data”

Row-key =”id” this line is indispensable

lazy

:load=”load”

:tree-props=”{hasChildren: ‘haschildren’}”

>

After a child node is added, how can I automatically expand the parent node and display the new child node?

Click the “New Staging” button to trigger the following method

function Create(row) {

.

// Reset the parent node regardless of whether the parent node has loaded data before

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

// Load the data and expand the parent node

   mytable.value.store.loadOrToggle(row);

}

How do I refresh the page after deleting child nodes?

function Delete(row) {

.

// Reset the parent node

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

// Iterate over all parent nodes, find the parent of the current deleted item, and refresh

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

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

// Find the parent node and refresh the data

        mytable.value.store.loadOrToggle(item);

    }

    });

}

I hope it helps