el-table树形数据序号排序处理

1,用下面这个代码可以实现基本表格的序号排序

javascript 复制代码
 <el-table-column label="序号" width="50px" align="center">
        <template slot-scope="scope">
                {{ scope.$index + 1 }}
         </template>
  </el-table-column>

2,element ui树形结构的表格,是没有序号排序的,如果还是用上面的代码,序号排序的时候也会把数据的子节点进行序号排序

上面那个肯定不是我们想要的效果,直接上代码,看最终效果

javascript 复制代码
 this.tableData1.forEach((item, index) => {
      item.parentIndex = index + 1;
      if (item.children) {
        item.children.forEach((it, ind) => {
          it.parentIndex = item.parentIndex + "-" + (ind + 1)
        })
      }
    })

展开前

展开后

相关推荐
林恒smileZAZ1 天前
Vue<前端页面版本检测>
前端·javascript·vue.js
我是Superman丶1 天前
Element UI 表格某行突出悬浮效果
前端·javascript·vue.js
Cobyte1 天前
3.响应式系统基础:从发布订阅模式的角度理解 Vue2 的数据响应式原理
前端·javascript·vue.js
军军君011 天前
Three.js基础功能学习十八:智能黑板实现实例五
前端·javascript·vue.js·3d·typescript·前端框架·threejs
禅思院1 天前
前端架构演进:基于AST的常量模块自动化迁移实践
前端·vue.js·前端框架
许杰小刀1 天前
FastAPI + Vue 前后端分离实战:我的项目结构“避坑指南”
前端·vue.js·fastapi
walking9571 天前
Vue3 日历组件选型指南:五大主流方案深度解析
前端·vue.js·面试
英俊潇洒美少年1 天前
Vue、React.lazy、React 19 异步组件核心区别
javascript·vue.js·react.js
快乐小土豆~~1 天前
echarts柱状图的X轴label过长被重叠覆盖
前端·javascript·vue.js·echarts
儒雅的烤地瓜1 天前
Vue | Vue3中<script setup>用法详解
vue.js·vue3·选项式api·组合式 api·setup方法·<script setup>