使用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如何监听元素横向滚动到最右侧问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

    Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

    这篇文章主要介绍了Vue项目代码之路由拆分、Vuex模块拆分、element按需加载,项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理,本文通过示例给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • Vue实现选中文本弹出弹窗功能的完多种方法

    Vue实现选中文本弹出弹窗功能的完多种方法

    在现代 Web 应用中,选中文本后显示相关操作或信息是一种常见的交互模式,本文将详细介绍如何在 Vue 中实现选中文本后弹出弹窗的功能,包括其工作原理、多种实现方式以及实际项目中的应用示例,需要的朋友可以参考下
    2025-09-09
  • Vue中下载不同文件五种常用的方式

    Vue中下载不同文件五种常用的方式

    自己最近做项目的时候遇到需要下载文件的需求,索性这里给总结下,这篇文章主要给大家介绍了关于Vue中下载不同文件五种常用的方式,需要的朋友可以参考下
    2023-09-09
  • 解决vue中el-tab-pane切换的问题

    解决vue中el-tab-pane切换的问题

    这篇文章主要介绍了解决vue中el-tab-pane切换的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue ECharts简易实现雷达图

    Vue ECharts简易实现雷达图

    这篇文章主要介绍了基于Vue ECharts简易实现雷达图,本文通过实例代码图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • Vuex actions 异步操作方法详解

    Vuex actions 异步操作方法详解

    这篇文章主要介绍了Vuex actions 异步操作方法,需要的朋友可以参考下
    2023-10-10
  • Vue2.0+ElementUI实现查询条件展开和收起功能组件(代码示例)

    Vue2.0+ElementUI实现查询条件展开和收起功能组件(代码示例)

    文章介绍了如何将查询条件表单封装成一个通用组件,以提高开发效率,组件支持多条件的折叠和展开功能,并提供了使用示例,感兴趣的朋友一起看看吧
    2025-01-01
  • vue2中引用及使用 better-scroll的方法详解

    vue2中引用及使用 better-scroll的方法详解

    这篇文章主要介绍了vue2中引用better-scroll和使用 better-scroll的方法,使用时有三个要点及注意事项在文中给大家详细介绍 ,需要的朋友可以参考下
    2018-11-11
  • vue版日历组件的实现方法

    vue版日历组件的实现方法

    这篇文章主要为大家详细介绍了vue版日历组件的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论