el-table树形数据序号排序处理方案
更新时间：2024年03月19日 11:19:22 作者：Cool_so_cool
这篇文章主要介绍了el-table树形数据序号排序处理方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
1，用下面这个代码可以实现基本表格的序号排序
<el-table-column label="序号" width="50px" align="center">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
2，element ui树形结构的表格，是没有序号排序的，如果还是用上面的代码，序号排序的时候也会把数据的子节点进行序号排序
上面那个肯定不是我们想要的效果，直接上代码，看最终效果
this.tableData1.forEach((item, index) => {
item.parentIndex = index + 1;
if (item.children) {
item.children.forEach((it, ind) => {
it.parentIndex = item.parentIndex + "-" + (ind + 1)
})
}
})展开前
展开后
到此这篇关于el-table树形数据序号排序处理的文章就介绍到这了,更多相关el-table树形数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue+elementUI组件table实现前端分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
本文主要介绍了Vue便签的简单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
其实采用vueUse中的useVirtualList方法同样可以实现虚拟列表,这篇文章小编就来和大家详细介绍一下如何使用vueUse实现简单的虚拟列表效果吧2024-04-04
这篇文章主要为大家详细介绍了基于vue2实现左滑删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
本文主要介绍了vue3+Element采用递归调用封装导航栏，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了vue动态添加表单validateField验证功能实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
本篇文章主要介绍了vue-router路由参数刷新消失的问题解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
今天小编就为大家分享一篇Vue模拟数据,实现路由进入商品详情页面的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
解决打包后出现错误y.a.addRoute is not a function的
这篇文章主要介绍了解决打包后出现y.a.addRoute is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue+element UI中如何给指定日期添加标记问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
最新评论