使用el-table实现树状结构图数据展示（无父子关系解决树状结构转换问题）

最新推荐文章于 2024-05-24 11:24:33 发布
最新推荐文章于 2024-05-24 11:24:33 发布
阅读量1.5k 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42192641/article/details/132686793
版权

1.背景：需求是普通表格展示成如下数据

2.首先的我的数据类型是：

3.正常的数据类型：

可以看出我的数据类型没有pid这种字眼（就是没有节点关系）

3.勉强符合需求版本

（1）第一步：给数据添加节点关系

function addFatherId(data) {
  let map = {};
  if (!Array.isArray(data)) {
    return [];
  }
  data.forEach((item) => {
    if (!map[item.projId]) {
      map[item.projId] = item.uuid; // 记录项目的主导人 uuid
      item.fatherId = '0'
    }else {
      item.fatherId = map[item.projId]; // 为当前对象添加 fatherId 属性
    }
  });
  return data;
}

（2）第二步：就是正常的数据转树状结构

function toTree(data) {
    let result = [];
    let map = {};
    if (!Array.isArray(data)) {
      //验证data是不是数组类型
      return [];
    }
    data.forEach((item) => {
      map[item.uuid] = item;
    });
    data.forEach((item) => {
      item.projName = item.projName + '(' + item.trainId + ')';
      let parent = map[item.fatherId];
      if (parent) {
        (parent.children || (parent.children = [])).push(item);
      } else {
        result.push(item);
      }
    });
    return result;
}

（3）第三步：el-table使用该数据

			<el-table
				:data="tableData"
				border
				style="width: 100%"
				stripe
				height="calc(100% - 40px)"
				:default-sort="{ prop: 'saveTime', order: 'descending' }"
				@sort-change="onSortChanged"
				@row-dblclick="onTableDblclick"
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
				row-key="uuid"

			>
				<!-- 非树状图 -->
				<!-- <el-table-column type="index" label="序号" align="center" width="60" :index="(index) => this.$common.pageIndexMethod(index, form.pageIndex, form.pageSize)"> </el-table-column>
				<el-table-column prop="studentName" label="姓名" align="center" width="150"> </el-table-column>
				<el-table-column prop="sex" label="性别" align="center" :formatter="onRendersex" width="100"> </el-table-column>
				<el-table-column prop="idCard" label="身份证号码" align="center"> </el-table-column>
				<el-table-column prop="workUnit" label="工作单位" align="center" width="150"> </el-table-column>
				<el-table-column prop="projName" label="培训项目" align="center" width="180"> </el-table-column>
				<el-table-column prop="trainId" label="培训编号" align="center"> </el-table-column>
				<el-table-column prop="certNo" label="证书编号" align="center" width="200"> </el-table-column>
				<el-table-column prop="isReceived" label="是否领取" align="center"> </el-table-column>
				<el-table-column prop="receiver" label="领取人" align="center"> </el-table-column>
				<el-table-column label="操作" align="center" width="240" v-if="operateBtnShow">
					<template slot-scope="scope">
						<el-button type="primary" @click="updateRowData(scope.row)">编辑</el-button>
						<el-button type="primary" @click="removeRowData(scope.row.uuid)">删除</el-button>
					</template>
				</el-table-column> -->

				<!-- 树状图 -->
				<el-table-column prop="projName" label="培训项目" align="center" width="180"> </el-table-column>
				<el-table-column label="课程安排" align="center">
					<el-table-column prop="studentName" label="姓名" align="center" width="150"> </el-table-column>
					<el-table-column prop="sex" label="性别" align="center" :formatter="onRendersex" width="100"> </el-table-column>
					<el-table-column prop="idCard" label="身份证号码" align="center"> </el-table-column>
					<el-table-column prop="workUnit" label="工作单位" align="center" width="150"> </el-table-column>
					<el-table-column prop="trainId" label="培训编号" align="center"> </el-table-column>
					<el-table-column prop="certNo" label="证书编号" align="center" width="200"> </el-table-column>
					<el-table-column prop="isReceived" label="是否领取" align="center"> </el-table-column>
					<el-table-column prop="receiver" label="领取人" align="center"> </el-table-column>
					<el-table-column label="操作" align="center" width="240" v-if="operateBtnShow">
						<template slot-scope="scope">
							<el-button type="primary" @click="updateRowData(scope.row)">编辑</el-button>
							<el-button type="primary" @click="removeRowData(scope.row.uuid)">删除</el-button>
						</template>
					</el-table-column> 
				</el-table-column>
			</el-table>

4.最好的版本：

HTML代码：

			<el-table
				:data="tableData"
				border
				style="width: 100%"
				stripe
				height="calc(100% - 40px)"
				:default-sort="{ prop: 'saveTime', order: 'descending' }"
				@sort-change="onSortChanged"
				@row-dblclick="onTableDblclick"
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
				row-key="uuid"
				default-expand-all
			>
				<!-- 非树状图 -->
				<!-- <el-table-column type="index" label="序号" align="center" width="60" :index="(index) => this.$common.pageIndexMethod(index, form.pageIndex, form.pageSize)"> </el-table-column>
				<el-table-column prop="studentName" label="姓名" align="center" width="150"> </el-table-column>
				<el-table-column prop="sex" label="性别" align="center" :formatter="onRendersex" width="100"> </el-table-column>
				<el-table-column prop="idCard" label="身份证号码" align="center"> </el-table-column>
				<el-table-column prop="workUnit" label="工作单位" align="center" width="150"> </el-table-column>
				<el-table-column prop="projName" label="培训项目" align="center" width="180"> </el-table-column>
				<el-table-column prop="trainId" label="培训编号" align="center"> </el-table-column>
				<el-table-column prop="certNo" label="证书编号" align="center" width="200"> </el-table-column>
				<el-table-column prop="isReceived" label="是否领取" align="center"> </el-table-column>
				<el-table-column prop="receiver" label="领取人" align="center"> </el-table-column>
				<el-table-column label="操作" align="center" width="240" v-if="operateBtnShow">
					<template slot-scope="scope">
						<el-button type="primary" @click="updateRowData(scope.row)">编辑</el-button>
						<el-button type="primary" @click="removeRowData(scope.row.uuid)">删除</el-button>
					</template>
				</el-table-column> -->

				<!-- 树状图 -->
				<el-table-column prop="projName" label="培训项目" align="center" width="180"> </el-table-column>
				<el-table-column label="参与人信息" align="center">
					<el-table-column prop="studentName" label="姓名" align="center" width="150"> </el-table-column>
					<el-table-column prop="sex" label="性别" align="center" :formatter="onRendersex" width="100"> </el-table-column>
					<el-table-column prop="idCard" label="身份证号码" align="center"> </el-table-column>
					<el-table-column prop="workUnit" label="工作单位" align="center" width="150"> </el-table-column>
					<el-table-column prop="trainId" label="培训编号" align="center"> </el-table-column>
					<el-table-column prop="certNo" label="证书编号" align="center" width="200"> </el-table-column>
					<el-table-column prop="isReceived" label="是否领取" align="center"> </el-table-column>
					<el-table-column prop="receiver" label="领取人" align="center"> </el-table-column>
				</el-table-column>
				<el-table-column label="操作" align="center" width="240" v-if="operateBtnShow">
					<template slot-scope="scope">
						<div v-if="scope.row.pid !== '0'">
							<el-button type="primary" @click="updateRowData(scope.row)">编辑</el-button>
							<el-button type="primary" @click="removeRowData(scope.row.uuid)">删除</el-button>
						</div>
					</template>
				</el-table-column> 
			</el-table>

html代码其实很正常。

js代码：

function toTree(data) {
    let result = [];
    let map = {};
    if (!Array.isArray(data)) {
      //验证data是不是数组类型
      return [];
    }
    data.forEach((item) => {
      map[item.uuid] = item;
    });
    data.forEach((item) => {
      let parent = map[item.projId];
      if (parent) {
        (parent.children || (parent.children = [])).push(item);
      } else {
        result.push(item);
      }
    });
    return result;
}

function addFatherId(data) {
  let map = {};
  if (!Array.isArray(data)) {
    return [];
  }
  data.forEach((item) => {
    // 如果projId是第一次出现，就给data添加节点的父元素
    if (!map[item.projId]) {
      map[item.projId] = item.projId;
      data.push({
        uuid:item.projId,
        pid:'0',
        projName: item.projName
      })
    }
  });
  return data;
}

主要思路就是没有节点关系，原数据data是一个数组，我的项目是根据项目来划分所有节点，那我直接根据projId来创建一个新的对象放在data数据中见函数addFatherId(data)，处理好的数据如下：

然后再将这个最新数据放入toTree函数中，处理结束，显示结果如下：

建议是直接让后端处理！！

Rrar
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+elementui实现多层树形菜单
10-16
一个完整的树形菜单demo，下载即可运行，包含node_module包，使用vue+el-menu完成多层树形菜单。内含模拟数据格式。
el-table树形表格表单验证(列表生成序号)
10-15
`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格时，验证表单和生成唯一的序号对于确保数据的准确性和一致性至关重要。 ### 一、树形列表生成序号 生成树形列表...
element的Table表格组件树形数据与懒加载简单使用
weixin_41549971的博客
01-10 2102
element的Table表格组件树形数据与懒加载简单使用
Vue2&Element-UI中Table树形结构默认全部展开和关闭的实现方案
月色真美121的博客
07-23 5489
element ui 中table表格全部展开和收起的两种实现方式
el-table的树形结构结合多选框使用，实现单选父子联动，全选，反选功能
最新发布
weixin_47342392的博客
05-24 853
点击全选按钮，选中全部；点击父节点需选中其所有子节点，点击子节点需反选其父节点。
el-table树形数据展示
yeyazi001的博客
11-29 187
数据展开后发现收缩按钮消失（其实是错位了）解决办法：修改布局样式。
el-table 树状结构处理
qq_30823755的博客
10-21 1389
文章目录一、后端树形逻辑处理二、前端递归处理 table组件关键字冲突 一、后端树形逻辑处理 代码如下： /** * 条件查询，返回该节点及其所有祖父节点，并转换成树形返回 * * @param searchVO 查询条件 * @return 树 */ @Override public List<VehicleStructureTreeVo> treeSearch(VehicleStructureTreeVo sear
vue+Element-ui实现树形组件、表格树
丨康有为丨的博客
07-25 1万+
vue+Element-ui实现树形组件、表格树
el-table树形结构展示数据，含泪整理
qq_39500287的博客
10-13 1534
【代码】el-table树形结构展示数据，含泪整理
elementui表格el-table-树形数据-数据重构
JJ_Smilewang的博客
02-24 2188
经常会遇到各种分类列表的展示，并且类别还是多级的，这时就需要使用elmentui表格中的树形数据进行展示。
Element-ui 表格实现树形结构表格
热门推荐
zhouzhiwengang的专栏
02-10 2万+
前端效果展示: 在el-table中，支持树类型的数据的显示。当 row 中包含children字段时，被视为树形数据。渲染树形数据时，必须要指定row-key。支持子节点数据异步加载。 通过指定 row 中的hasChildren字段来指定哪些行是包含子节点。children与hasChildren都可以通过tree-props配置。 row-key="id"和:tree-props="{children: 'children', hasChildren: 'hasChild...
el-table做成树形结构并解决数据驱动视图问题
weixin_59703592的博客
03-24 846
但是我们给第一层增加子级时候，或者删除第二层内数据，亦或者修改第二层以内数据就会发现，调取的刷新列表方法是没有效果，我们再手动刷新页面后数据才会渲染上去？这个是刷新的方法 ，主要是刷新子级列表数据的方法，我们在增加、修改、删除子级时候调用这个方法。方法时，会传入需要加载子节点数据的树节点对象，您可以通过该参数获取该节点的相关信息，如节点数据、父节点等。我们在完成一个树形表格后，需要对数据进行增删改查动作，同时让我们保存数据渲染到表格上。方法时，会传入当前的树形数据结构，您可以通过该参数获取整棵树的数据。
使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据（大类）以及自定义表格合计值
Dream104的博客
10-14 7989
使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据（大类）以及自定义表格合计值
el-table-infinite-scroll:El-Table无限滚动
05-26
查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-scroll全局引入import Vue from 'vue';import elTableInfiniteScroll ...
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
本篇文章将深入探讨如何在Vue.js项目中结合`el-table`和`file-saver`库，实现前端导出分页数据到Excel的功能。 首先，我们需要了解`el-table`。它是Element UI的一部分，提供了一种灵活的方式来展示和操作表格数据...
vue el-table实现行内编辑功能
10-15
在Vue.js中，Element UI库提供了丰富的UI组件，其中`el-table`是用于展示表格数据的一个强大组件。本文将详细讲解如何在Vue项目中利用Element UI的`el-table`实现行内编辑功能。 首先，我们需要在`el-table`的表头...
vue el-table实现自定义表头
10-15
主要为大家详细介绍了vue el-table实现自定义表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
＜el-table＞树tree节点全选
lv_suri的博客
03-20 721
爷爷：A 指(广东省)儿子：C 指（区/街道）爸爸：B 指(市)
ElementUI table树形数据
shykevin的博客
06-14 2458
一、概述 官方链接：https://element.eleme.cn/#/zh-CN/component/table 官方效果： 二、demo演示 test.vue <template> <div> <el-table :data="tableData" style="width: 100%;margin-bottom: 20...
如何展示树状表格 思路：El-table（Row-key、树形结构数据（children））
04-05
展示树状表格可以使用Element UI中的El-table组件，需要设置Row-key和树形结构数据（children）。 1. 设置Row-key 在El-table中，设置Row-key可以帮助组件唯一标识每一行数据，以便在操作表格时更加方便。对于树状表格来说，Row-key需要设置为每个节点的唯一标识，通常是节点的id或者index。 2. 树形结构数据 树形结构数据是指每个节点下面可以有多个子节点，也可以没有子节点。在El-table中，需要将数据转换成树形结构，即每个节点都包含一个children属性，存储该节点下的所有子节点数据。这样，El-table才能正确地展示出树状表格。 实现步骤如下： 1. 定义表格列字段，包括节点名称、节点编号等信息。 2. 将数据转换成树形结构，即每个节点都包含一个children属性，存储该节点下的所有子节点数据。 3. 在El-table中设置Row-key属性，指定每个节点的唯一标识。 4. 在El-table中使用$scopedSlots插槽，可以自定义每个单元格的内容和样式，以展示树状结构。 下面是一个简单的例子，展示如何使用El-table展示树状表格： ``` <template> <el-table :data="treeData" :row-key="rowKey" border> <el-table-column label="节点名称" prop="name" width="180"> <template slot-scope="{ row }"> <span v-if="row.children.length" style="cursor: pointer;" :class="{'is-leaf': row.leaf}" @click="toggleNode(row)"> {{ row.name }} </span> <span v-else>{{ row.name }}</span> </template> </el-table-column> <el-table-column label="节点编号" prop="id" width="180"></el-table-column> <el-table-column label="父节点编号" prop="parentId" width="180"></el-table-column> </el-table> </template> <script> export default { data() { return { treeData: [ { id: 1, name: '节点1', parentId: 0, children: [ { id: 2, name: '节点1-1', parentId: 1, children: [ { id: 3, name: '节点1-1-1', parentId: 2, children: [] } ] }, { id: 4, name: '节点1-2', parentId: 1, children: [] } ] }, { id: 5, name: '节点2', parentId: 0, children: [ { id: 6, name: '节点2-1', parentId: 5, children: [] } ] } ], rowKey: 'id' } }, methods: { toggleNode(row) { row.expanded = !row.expanded } } } </script> ``` 在上面的例子中，我们定义了三个表格列字段，分别是节点名称、节点编号和父节点编号。其中，节点名称这一列使用了$scopedSlots插槽，自定义了单元格展示的内容和样式，以展示树状结构。在数据中，我们将每个节点都转换成了树形结构，即每个节点都包含一个children属性，存储该节点下的所有子节点数据。 在El-table中，我们通过设置Row-key属性，指定了每个节点的唯一标识。同时，我们在$scopedSlots插槽中使用了一个toggleNode方法，用于展开或折叠子节点。 最终，我们可以看到展示出了一个树状结构的表格，每个节点下面都展示了其所有子节点的信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值