使用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如何启动项目

    这篇文章主要给大家介绍了关于Vue如何启动项目的相关资料,还介绍了解决vue启动项目时间很长问题的相关方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Vue自定义指令拖拽功能示例

    Vue自定义指令拖拽功能示例

    本文给大家分享vue自定义指令拖拽功能及自定义键盘信息,非常不错,具有参考借鉴价值,需要的的朋友参考下
    2017-02-02
  • uni app仿微信顶部导航条功能

    uni app仿微信顶部导航条功能

    这篇文章主要介绍了uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue项目中使用vue-layer弹框插件的方法

    vue项目中使用vue-layer弹框插件的方法

    这篇文章主要介绍了vue项目中使用vue-layer弹框插件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • vue实现匀速轮播效果

    vue实现匀速轮播效果

    这篇文章主要为大家详细介绍了vue实现匀速轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue实现父子组件之间的通信以及兄弟组件的通信功能示例

    vue实现父子组件之间的通信以及兄弟组件的通信功能示例

    这篇文章主要介绍了vue实现父子组件之间的通信以及兄弟组件的通信功能,结合实例形式分析了vue.js组件间通信相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 手把手教你如何在vue项目中使用rem布局

    手把手教你如何在vue项目中使用rem布局

    公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下,下面这篇文章主要给大家介绍了关于如何在vue项目中使用rem布局的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Vue Router的懒加载路径的解决方法

    Vue Router的懒加载路径的解决方法

    这篇文章主要介绍了Vue Router的懒加载路径的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 解决vue app.js/vender.js过大优化启动页

    解决vue app.js/vender.js过大优化启动页

    这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    这篇文章主要介绍了vue 表单绑定与组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03

最新评论