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中解决提示警告 for循环报错的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue中关于element的el-image 图片预览功能增加一个下载按钮(操作方法)
这篇文章主要介绍了vue中关于element的el-image 图片预览功能增加一个下载按钮,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了vue extend+promise封装全局弹窗组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
随着 Vue 3 的发布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再适用或有所变化,为了应对这种变化,我们可以选择在 Vue 3 应用中实现自定义的“事件总线”机制,所以本文给大家介绍了Vue3中如何自定义消息总线,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue element实现多个Formt表单同时验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据。这篇文章主要给大家介绍Vue el-autocomplete远程搜索下拉框并实现自动填充功能，感兴趣的朋友一起看看吧2019-10-10
本文通过实例代码给大家介绍vue实现3D标签云的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-07-07
这篇文章主要介绍了vue v-if未生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue2中无法监听数组和对象的某些变化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了在vue中使用console.log无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论