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开发过程中,项目的打包是一个非常重要的步骤,下面这篇文章主要给大家介绍了关于Vue项目打包问题(生产环境样式失效)的相关资料,文中介绍的非常详细,需要的朋友可以参考下2023-12-12
vue3 集成 echarts 最大的坑就是出现了,reactive 的数据 刷新了,但图表缺不会刷新,所以本文就给大家详细的介绍一下vue3集成echarts数据刷新后图表不刷新的解决方法,需要的朋友可以参考下2023-08-08
vue中常遇到第三方js,这篇文章主要给大家介绍了关于Vue项目中如何引入本地第三方JS库的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
Vue build过程取消console debugger控制台信息输出方法详解
这篇文章主要为大家介绍了Vue build过程取消console debugger控制台信息输出方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要为大家详细介绍了vue实现树形菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
这篇文章主要给大家介绍了基于vue+electron实现文件下载打开wps预览,文中有详细的代码示例供大家借鉴参考,感兴趣的同学可以参考阅读下2023-08-08
这篇文章主要介绍了vue实现el-select的change事件过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
Vue项目中对index.html中BASE_URL的配置方式
这篇文章主要介绍了Vue项目中对index.html中BASE_URL的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue项目运行或打包时，频繁内存溢出情况的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
利用vuex-persistedstate将vuex本地存储实现
这篇文章主要介绍了利用vuex-persistedstate将vuex本地存储的实现，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论