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

已于 2023-05-25 17:49:26 修改
阅读量1.4k 收藏 8
点赞数 5
文章标签： 前端
于 2023-05-25 17:47:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73267676/article/details/130872047
版权

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

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

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

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

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

最后改良效果是这样 

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

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

完结 撒花

三乌e
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
el-table树形表格表单验证(列表生成序号)
10-15
主要介绍了el-table树形表格表单验证(列表生成序号)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table树形数据序号展示
niuniu2878499107的博客
01-12 713
el-table树形数据序号展示。
el-table树形数据序号排序处理
最新发布
Cool_so_cool的博客
03-15 790
【代码】el-table树形数据序号排序处理。
vue+element UI 表格树形数据处理序号
m0_56274171的博客
11-12 6973
element UI的Table表格,遇到树形数据展示,父级数据显示序号,子项数据不展示序号 先展示最终效果 代码 <el-table ref="table" row-key="id" size="medium" height="100%" border :data="tableData" :tree-props="{ children: 'chil.
table中加表单元素每行怎么验证_el-table树形表格表单验证(列表生成序号)
weixin_39522698的博客
12-21 303
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row，通过广度优先遍历，以1，1.1，1.1.1的规则对树形列表生成确定唯一值的索引，因为列表自身可以做CURD，因此需要每次列表的item增加或减少时重新调用生成索引的方法。setIndex = (data) => {let queue = [...data];let loop = 0;while (queue...
详解vue2.0的Element UI的表格table列时间戳格式化
01-21
这两天学习了vue2.0的Element UI的表格table列时间戳格式化，所以，今天添加一点小笔记。 表格属性 <el-table-column prop=createTime label=创建时间
Element-UI 中 el-table 树形数据 tree-props使用避坑
web15870359587的博客
03-08 4902
element官网提示设置tree-props为{children: 'children',hasChildren: 'hasChildren'}，data数据需要设置children和hasChildren属性，row-key也绑定了数据的唯一值变量id，但是树形结构就是出不来 在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。 设置 Table 的 lazy 属性为 true.
vue3.2 对el-table 树型结构数据的处理（干货）
qq_41620887的博客
07-02 3365
element plus中el-table的树形结构的处理方式
vue element-table（树形结构），实现同级拖动排序
weixin_45691700的博客
03-15 3128
5.犹豫这个过程中需要子级存在父级的parentId，自己把扁平化的方法改造了一下，在查询完列表数据时同步给子级添加父级的id。1.vue引用sortablejs 参考相关配置http://www.sortablejs.com/options.html。####需求：树形结构的table需要实现同级拖拽排序。3.初始化created中调用方法，方法如下。
vue+Element-ui实现树形组件、表格树
热门推荐
丨康有为丨的博客
07-25 1万+
vue+Element-ui实现树形组件、表格树
el-table添加序号
weixin_45890414的博客
10-22 636
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
element-ui 表格数据时间格式化的方法
12-02
在element-ui table 如何格式化呢  1.首先 代码如下:”AuditEndTime” label=”处理时间” width=”120″ formatter=”dateFormat” align=”center”>  主要是:formatter=”dateFormat” 这个属性  formatter...
Element树形表格实现层级index与表格序号隔页累加
Noctis99的博客
06-27 734
e
element ui table 树形表格实现子序列号自增1＞1.1＞1.1.1
月色真美121的博客
04-27 941
table树形结构实现子序列目录自增1>1.1>1.1.1
el-table树形表格表单验证，js树形列表生成序号
weixin_42356155的博客
09-15 1790
01、树形表格表单验证预览 02、树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row，通过广度优先遍历，以1，1.1，1.1.1的规则对树形列表生成确定唯一值的索引，因为列表自身可以做CURD，因此需要每次列表的item增加或减少时重新调用生成索引的方法。 const setIndex = (data) => { let queue = [...data]; let loop = 0; w
element el-table 树形数据、懒加载添加排序功能。懒加载数据同步更新
xia_zixin的博客
12-20 1223
表格自带的排序功能目前只针对第一级树结构，那么当我们想对整体树形数据来排序的时候就要经过特殊处理了。这里的问题在于不能直接拿到children来排序, 我们需要定义map来储存懒加载的数据。一定要有唯一标识，children的id不能与外层id相同。在data中加入一个map来用于存取数据
ElementUI table树形数据
shykevin的博客
06-14 2405
一、概述 官方链接：https://element.eleme.cn/#/zh-CN/component/table 官方效果： 二、demo演示 test.vue <template> <div> <el-table :data="tableData" style="width: 100%;margin-bottom: 20...
element表格树形结构序号问题
08-29
element表格树形结构序号问题是指如何在一个带有层次结构的表格中为每个元素分配一个唯一的序号。解决这个问题的方法有很多种，以下是其中两种常见的方法： 1. 递归法：递归法是一种通过递归和迭代的方式为表格中的每个元素分配一个序号。具体步骤如下： - 遍历每个元素，如果当前元素没有父元素，即为根元素，则将序号设置为一个随机的初始值（如1）； - 如果当前元素有父元素，则将序号设置为父元素的序号加上当前元素在父元素子元素列表中的索引值； - 对当前元素的每个子元素，重复上述步骤。 2. 广度优先搜索法：广度优先搜索法是一种通过队列来实现的搜索算法。其步骤如下： - 创建一个队列，并将根元素入队； - 从队列中取出一个元素，为其分配一个序号，并将其所有子元素入队； - 重复上述步骤，直到队列为空。 这两种方法都可以有效地为element表格树形结构中的每个元素分配唯一的序号。选择使用哪种方法取决于实际需求和应用场景。例如，如果需要根据序号查找和访问表格中的元素，递归法比较适合；而如果需要按层级遍历和处理表格中的元素，广度优先搜索法则更加方便。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值