使用table做成树形结构的table

 更新时间:2024年07月25日 10:20:42   作者:爱跳舞的程序员  
这篇文章主要介绍了使用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] : [];
}

总结

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

相关文章

  • Vue使用vue-cli创建项目

    Vue使用vue-cli创建项目

    这篇文章主要介绍了Vue使用vue-cli创建项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 派发器抽离vue2单组件中的大量逻辑技巧

    派发器抽离vue2单组件中的大量逻辑技巧

    这篇文章主要为大家介绍了派发器抽离vue2单组件中的大量逻辑技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue总线机制(bus)知识点详解

    vue总线机制(bus)知识点详解

    在本篇文章中小编给大家整理的是关于vue总线机制(bus)知识点总结,有兴趣的朋友们可以跟着学习下。
    2020-05-05
  • vue+vue-router转场动画的实例代码

    vue+vue-router转场动画的实例代码

    今天小编就为大家分享一篇vue+vue-router转场动画的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue+element 模态框表格形式的可编辑表单实现

    vue+element 模态框表格形式的可编辑表单实现

    这篇文章主要介绍了vue+element 模态框表格形式的可编辑表单实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Vue-cli3多页面配置详解

    Vue-cli3多页面配置详解

    这篇文章主要介绍了Vue-cli3多页面配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue 子组件和父组件传值的示例

    vue 子组件和父组件传值的示例

    这篇文章主要介绍了vue 子组件和父组件传值的示例,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-09-09
  • 使用vue-cli搭建SPA项目的详细过程

    使用vue-cli搭建SPA项目的详细过程

    vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,本文通过实例代码给大家介绍vue-cli搭建SPA项目的详细过程,感兴趣的朋友跟随小编一起看看吧
    2022-09-09
  • Vue中实现动态右键菜单的示例代码

    Vue中实现动态右键菜单的示例代码

    在前端开发中,实现自定义右键菜单能够为用户提供更多功能选项,本文就来介绍了Vue中实现动态右键菜单的示例代码,感兴趣的可以了解一下
    2024-11-11
  • npm ERR! code E404在vscode安装插件时报错的两种解决方案

    npm ERR! code E404在vscode安装插件时报错的两种解决方案

    这篇文章主要给大家介绍了关于npm ERR! code E404在vscode安装插件时报错的两种解决方案,关于这个问题,通常是由于插件名称输入错误、网络问题或插件已被删除引起的,文中将两种解决方法都介绍的非常详细,需要的朋友可以参考下
    2023-04-04

最新评论