使用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] : []; }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。