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)
        })
      }
    })

展开前

展开后

相关推荐
Chase_______40 分钟前
JavaWeb笔记2-JavaScript&Vue&Ajax
开发语言·javascript·vue.js
随便起的名字也被占用4 小时前
leaflet中绘制轨迹线的大量轨迹点,解决大量 marker 绑定 tooltip 同时显示导致的性能问题
前端·javascript·vue.js·leaflet
天下无贼!4 小时前
【自制组件库】从零到一实现属于自己的 Vue3 组件库!!!
前端·javascript·vue.js·ui·架构·scss
知识分享小能手5 小时前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
前端小巷子6 小时前
Vue 2 Diff 算法
前端·vue.js·面试
咔咔一顿操作14 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹14 小时前
用el-table实现的可编辑的动态表格组件
前端·vue.js
90后的晨仔15 小时前
表单输入绑定详解:Vue 中的 v-model 实践指南
前端·vue.js
90后的晨仔16 小时前
Vue 事件处理深入指南:从基础到进阶
前端·vue.js
落雪小轩韩17 小时前
Vue常见题目
javascript·vue.js