vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > table做成树形结构的table

使用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] : [];
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文