所有实现代码如下:
<el-table
:key="itemKey"
border
:data="demo2.tableData"
ref="tableRef"
highlight-current-row
size="small"
row-key="ID"
width="100%"
height="100%"
lazy
:load="load"
@selection-change="handleSelectionChange"
default-expand-all
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
:tree-props="{ children: 'Children', hasChildren: 'Haschilds' }"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
/>
<el-table-column prop="OrgName" label="组织结构名称" tree-node />
</el-table>
//选择
const multipleSelection = ref([]);
const handleSelectionChange = val => {
multipleSelection.value = val;
};
const maps = new Map();//存所有子节点
const itemKey = ref(1);//刷新用
//懒加载方法
const load = (row, treeNode, resolve) => {
setTimeout(() => {
var parms = { parentid: row.ID };
GetOrganize(parms)
.then(childs => {
maps.set(row.ID, { row, treeNode, resolve });
resolve(childs);
})
.catch(msg => {
});
}, 500);
};
//重新加载
const toggaletree = item => {
demo2.loading = false;
//懒加载重新渲染
demo2.tableData = [];
var parms = { parentid: 0 };
GetOrganize(parms).then(data => {
demo2.tableData = data;
if (item != 0) {
item.Haschilds = true;
var mapdata = maps.get(item.ID);
if (mapdata && mapdata != undefined) {
const { row, treeNode, resolve } = mapdata;
load(row, treeNode, resolve);
}
}
});
};
//删除
const onDelete = async () => {
const SelectionList = multipleSelection.value;
if (SelectionList.length > 0) {
ElMessageBox.confirm("您确定删除选中数据吗?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
DeleteOrganizelist(SelectionList.map(t => t.ID))
.then(data => {
successMessage("删除成功");
var i = 0;
SelectionList.forEach((item, index) => {
tableRef.value.store.clearSelection();
var mapdata = maps.get(item.parentId);
if (mapdata && mapdata != undefined) {
const { row } = mapdata;
tableRef.value.store.states.lazyTreeNodeMap.value[
item.parentId
] = [];
toggaletree(row);
i = 1;
}
});
if (i == 0) {
toggaletree(0);
}
})
.catch(msg => {
errorMessage(msg);
});
})
.catch(() => {});
} else {
errorMessage("请最少选择一行");
}
};
花了一个早上的时间才解决的,很适用!