使用table做成树形结构的table
作者:爱跳舞的程序员
这篇文章主要介绍了使用table做成树形结构的table问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
table做成树形结构的table

<el-table
:default-expand-all="false"
:data="list"
style="width: 100%; margin-bottom: 20px"
row-key="listId"
border
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
lazy
:load="load"
>
<el-table-column prop="bppjName" label="部件名称"> </el-table-column>
<el-table-column prop="stkName" label="物资名称"> </el-table-column>
<el-table-column prop="stkCode1" label="物资编码"> </el-table-column>
<el-table-column prop="stkCode" label="型号规格"> </el-table-column>
<el-table-column prop="metric" label="单位" width="80" align="center"> </el-table-column>
<el-table-column prop="num" label="数量" width="80" align="center"> </el-table-column>
<el-table-column prop="note" label="备注"> </el-table-column>
</el-table> getList() {
// 一开始获取数据列表
const obj = {
listId: this.listId,
};
getList(obj).then((res) => {
this.list = res.rows;
this.list.forEach((item) => {
// 必须要设置,不然没有下级图标显示
item.hasChildren = true;
item.children = null;
});
});
},
load(tree, treeNode, resolve) {
// 获取下一个节点数据 手动添加上给当前的节点
getUdmBppjDataList({ listId: tree.listId }).then((res) => {
const childList = res.rows;
childList.forEach((item) => {
// 必须要设置,不然没有下级图标显示
item.hasChildren = true,
item.children = null;
});
setTimeout(() => {
resolve(childList);
}, 500);
});
},table树形结构,获取一个节点的所有父节点
数据
let tree = [
{
id:1,
code: '1',
fsecid:0,
children: [
{
id:11,
fsecid:1,
code:'1.1',
children: [
{
id:111,
fsecid:11,
code: '1.1.1',
}
]
},
{
id:12,
fsecid:1,
code: '1.2',
}
]
},
{
code: '2',
id:2,
fsecid:0,
children: [
{
id:21,
fsecid:2,
code: '2.1',
}
]
}
]
let result=scheduleAlgorithm(tree,11,'fsecid','children')
console.log("result=====",result);
//结果 result===== [ 1, 11 ]
标题函数实现
/**判断叶子节点的所有父节点*/
function scheduleAlgorithm(
array,//树形数据
value,//找到valueName属性名 所等于这个值所有的父节点,2,3参数是关联的
valueName = "fsecid",//与上一节点相关联的值的字段名,当前节点的父节点id
childrenName = "children",//存放子节点数据的数组名称
) {
if (!value || !Array.isArray(array)) return [];
const result = [];
let valid = false;
const seek = (array, value) => {
let parentValue = "";
const up = (array, value, lastValue) => {
array.forEach(v => {
const val = v[valueName];
const child = v[childrenName];
if (val === value) {
valid = true;
parentValue = lastValue;
return;
}
if (child && child.length) up(child, value, val);
});
};
up(array, value);
if (parentValue) {
result.unshift(parentValue);
seek(array, parentValue);
}
};
seek(array, value);
return valid ? [...result, value] : [];
}
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
