element table表格 树形数据 序号格式处理

已于 2023-05-25 17:49:26 修改
阅读量1.9k 收藏 8
点赞数 5
文章标签： 前端
于 2023-05-25 17:47:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73267676/article/details/130872047
版权
文章描述了在处理表格树形数据时遇到的序号显示逻辑错误，作者通过删除原有的type=index并添加自定义属性parenIndes来解决。在数据接口处定义parenIndes，为各级节点添加序号。对于多级嵌套的情况，建议使用递归来处理。最终实现了展开标志与序号的正确对应。
摘要由CSDN通过智能技术生成

最近做的一个功能模块采用了表格树形数据 且需要用序号，但是用上了 table自带的序号后 页面展示是这样子的

 里面的子级也占了序号编号且展开树形标志到了第二列，这是不符合逻辑的，后面思考了解决办法。

 首先把原来的type=’index‘的删除 替换成自己写的自定义属性parenIndes

接下来 我们在获取数据接口位置来定义这个parenIndes

 data.list是这个展示数据，children属性里面是他的子级，最后各自加上自定义parenIndes序号，最后赋值。（我数据只有两级嵌套，如果你们的数据有三四级嵌套的话建议使用递归）

最后改良效果是这样 

 因为树形展开标志是默认在第一个自定义prop里面 type序号是不算的 所以整体都融洽了

代码和逻辑都不复杂 提供的是一个思路

完结 撒花

三乌e
关注
Element-UI 中 el-table 树形数据 tree-props使用避坑
web15870359587的博客
03-08 5289
element官网提示设置tree-props为{children: 'children',hasChildren: 'hasChildren'}，data数据需要设置children和hasChildren属性，row-key也绑定了数据的唯一值变量id，但是树形结构就是出不来 在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。 设置 Table 的 lazy 属性为 true.
V3.0element中table表格树形结构与懒加载通过接口获取展开行数据，并实现自动展开某行以及展开行数据删除，编辑，新增，展开行某些列不显示等功能
m0_53113852的博客
11-23 1515
超详细讲解V3.0element中table表格树形结构与懒加载通过接口获取展开行数据，并实现自动展开某行以及展开行数据删除，编辑，新增，展开行某些列不显示等功能
el-table树形表格表单验证(列表生成序号)
11-20
树形表格表单验证预览 树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row，通过广度优先遍历，以1，1.1，1.1.1的规则对树形列表生成确定唯一值的索引，因为列表自身可以做CURD，因此需要每次列表的item增加或减少时重新调用生成索引的方法。 setIndex = (data) => { let queue = [...data]; let loop = 0; while (queue.length > 0) { loop++ [...queue].forEach((child, i
ElementUI树形表格实现
最新发布
Hhzzy99的博客
07-29 608
通过本文的介绍，我们学习了如何使用 ElementUI 实现树形表格，包括基本的组件使用、数据结构的定义以及如何展示树形结构。希望这些内容对你有所帮助，在实际项目中能够灵活运用这一强大的组件来展示层级数据。如果你有任何问题或建议，欢迎在下方留言讨论。
el-table树形数据序号展示
niuniu2878499107的博客
01-12 1109
el-table树形数据序号展示。
vue+element UI 表格树形数据处理序号
m0_56274171的博客
11-12 7408
element UI的Table表格,遇到树形数据展示,父级数据显示序号,子项数据不展示序号 先展示最终效果 代码 <el-table ref="table" row-key="id" size="medium" height="100%" border :data="tableData" :tree-props="{ children: 'chil.
记录elementUI树形表格，序号按1，1.1，1.1.1生成
Samuel_OY的博客
03-14 729
记录elementUI树形表格，序号按1，1.1，1.1.1生成
element ui Table组件 自定义序号 让element的Table有序号
weixin_42556438的博客
07-15 2149
使用Element UI的Table组件自定义序号 在分页的情况下，Table的序号每页都是从1开始。在某些时候用户体验不是很好，所以需要自定义序号。 <el-table-column label="序号" align="left" class-name="el-table-normalcol" width="80"> <template slot-scope="scope"> <div>{{ (currentPage - 1) *
使用element-plus table表格中的树形数据与懒加载，解决VUE3中不能使用vue-table-with-tree-grid（黑马电商管理系统项目）
ajin711的博客
10-16 2597
vue3不能使用vue-table-with-tree-grid组件，上网搜了一下没有搜到vue3可以使用的类似组件，最后用element-plus table表格中的树形数据与懒加载解决了问题。
table中加表单元素每行怎么验证_el-table树形表格表单验证(列表生成序号)
weixin_39522698的博客
12-21 356
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row，通过广度优先遍历，以1，1.1，1.1.1的规则对树形列表生成确定唯一值的索引，因为列表自身可以做CURD，因此需要每次列表的item增加或减少时重新调用生成索引的方法。setIndex = (data) => {let queue = [...data];let loop = 0;while (queue...
el-table树形表格表单验证，js树形列表生成序号
weixin_42356155的博客
09-15 1874
01、树形表格表单验证预览 02、树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row，通过广度优先遍历，以1，1.1，1.1.1的规则对树形列表生成确定唯一值的索引，因为列表自身可以做CURD，因此需要每次列表的item增加或减少时重新调用生成索引的方法。 const setIndex = (data) => { let queue = [...data]; let loop = 0; w
el-table添加序号
weixin_45890414的博客
10-22 681
element 的 table添加序号 template中用 props.$index可以获取当前索引(必须type="index"时) <el-table-column label="#" type="index" align="center"> <template #default="props"> {{ (pagination.currentPage - 1) * pagination.pageSize + props.$inde
el-table树形数据序号排序处理
Cool_so_cool的博客
03-15 1182
【代码】el-table树形数据序号排序处理。
vue3.2 对el-table 树型结构数据的处理（干货）
qq_41620887的博客
07-02 3604
element plus中el-table的树形结构的处理方式
element组件中关于表格的序列问题
m0_58447769的博客
10-20 369
在后台管理项目中。我们经常会遇到这种带有分页器的表格数据。 上图中的序号列数据是根据element表格组件中的type=‘index’属性设置的。 问题 但因为分页器的存在，数据请求是根据分页器的页数来发起的。 这就导致了不管是哪一页的数据，他们的序列号永远是从1开始的。 而一般情况下的项目需求是让每条数据延续上一页的序号。 解决方案 在element表格组件中，有一个index自定义属性（自定义序列号） 通过这个属性，我们可以自己在代码中封装...
Element树形表格实现层级index与表格序号隔页累加
Noctis99的博客
06-27 796
e
vue—element 后台表格展示序号顺序
碌碌无为的程序猿
11-16 2760
记录一下 表格序号写法 <el-table :data="tableData" border v-loading="listLoading"> <el-table-column label="序号" align="center" width="70"> <template slot-scop="scope"><span>{{scope....
element el-table 树形数据、懒加载添加排序功能。懒加载数据同步更新
xia_zixin的博客
12-20 1866
表格自带的排序功能目前只针对第一级树结构，那么当我们想对整体树形数据来排序的时候就要经过特殊处理了。这里的问题在于不能直接拿到children来排序, 我们需要定义map来储存懒加载的数据。一定要有唯一标识，children的id不能与外层id相同。在data中加入一个map来用于存取数据
element表格树形结构序号问题
08-29
element表格树形结构序号问题是指如何在一个带有层次结构的表格中为每个元素分配一个唯一的序号。解决这个问题的方法有很多种，以下是其中两种常见的方法： 1. 递归法：递归法是一种通过递归和迭代的方式为表格中的每个元素分配一个序号。具体步骤如下： - 遍历每个元素，如果当前元素没有父元素，即为根元素，则将序号设置为一个随机的初始值（如1）； - 如果当前元素有父元素，则将序号设置为父元素的序号加上当前元素在父元素子元素列表中的索引值； - 对当前元素的每个子元素，重复上述步骤。 2. 广度优先搜索法：广度优先搜索法是一种通过队列来实现的搜索算法。其步骤如下： - 创建一个队列，并将根元素入队； - 从队列中取出一个元素，为其分配一个序号，并将其所有子元素入队； - 重复上述步骤，直到队列为空。 这两种方法都可以有效地为element表格树形结构中的每个元素分配唯一的序号。选择使用哪种方法取决于实际需求和应用场景。例如，如果需要根据序号查找和访问表格中的元素，递归法比较适合；而如果需要按层级遍历和处理表格中的元素，广度优先搜索法则更加方便。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值