1.el-table 代码
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
ref="table"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="date" label="Date" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="action" label="操作">
<template #default="scope">
<el-button
type="primary"
link
@click.prevent="addSubsetClick (scope.$index, scope.row)"
>新增</el-button
>
<el-button
type="danger"
link
@click.prevent="deleteClick(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
2.vue3代码
import {add, sonList } from "@/api/xxx";
const tableData = ref([
{
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
hasChildren: true,
address: 'No. 189, Grove St, Los Angeles',
parentId:"0"
}])
const table = ref()
const loadMap = new Map();
const load = (row, treeNode, resolve: (date) => void) => {
loadMap.set(row.id, { row, treeNode, resolve });
/*子集接口*/
/*sonList({ parentId: row.id }).then(res => {
let data = res.data;
resolve(data);
});*/
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
hasChildren:false,
parentId:"3"
},
{
id: 32,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
hasChildren:false,
parentId:"3"
},
])
}, 1000)
};
//新增子级
const addSubsetClick = (index, item) => {
//我遇到一个坑,子集删除完再次添加报错,修改在下面
//add({/*接口条件*/}).then(res => {
// if (res.code == 1) {
// if (loadMap.get(item.id)) {
// const { row, treeNode, resolve } = loadMap.get(item.id);
/*报错部分修改*/
// table.value.store.states.lazyTreeNodeMap.value[item.id].push({});
// load(row, treeNode, resolve);
// }
// });
//};
if (loadMap.get(item.id)) {
const { row, treeNode, resolve } = loadMap.get(item.id);
/*报错部分修改*/
table.value.store.states.lazyTreeNodeMap.value[item.id].push({});
load(row, treeNode, resolve);
}
}
//删除
const deleteClick = (index, item) => {
const { row, treeNode, resolve } = loadMap.get(item.parentId);
if (table.value.store.states.lazyTreeNodeMap.value[item.parentId].length > 1) {
//说明该节点下有多个子节点
table.value.store.states.lazyTreeNodeMap[item.parentId] = [];
} else {
//说明该节点只有一个节点
table.value.store.states.lazyTreeNodeMap.value[
item.parentId
] = [];
}
load(row, treeNode, resolve);
}
完结,持续维护…