思路:
一、返回整体表格对象数组
二、遍历此对象数组,1.给控制有展开项的属性hasChildren赋值为true;2 给原始对象数组的每个对象加 id(这里为了防止展开时每行都会展开)
三、给表格加load执行函数,和lazy属性,以及:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
属性
支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
table中的配置项为
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
style="width:75vw; background:#000"
stripe
row-key="id"
lazy
:load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
原始表格处理代码为
this.tableData = menuTable.map((ele, index) => {
ele.id = (this.currentPage - 1) * this.pageSize + index + 1 //控制哪一行展开
if (ele.hasChild !== 0) {
ele.hasChildren = true; // 表格可折叠展开
}
return ele;
});
console.log(this.tableData);
支持折叠行load执行函数为
load(tree, treeNode, resolve) {
console.log("表格折叠");
console.log(tree);
this.$api.menuManagement
.menuListLoad({
parentIds: [tree.menuId],
ifSingleLevel: 1
})
.then(res => {
if (res.code == 200) {
res.data.forEach((i, index) => {
i.id = tree.menuId + "-" + (index + 1);
});
resolve(res.data);
}
});
},
欢迎关注公众号:【抓住重点】,获取更多编程周边技能,与博主一起进步