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

展开前

展开后

相关推荐
我要两颗404西柚1 小时前
Stage three:VUE工程化与实战工具
前端·javascript·vue.js
看昭奚恤哭3 小时前
基于 RuoYi-Vue-Pro 定制了一个后台管理系统 magic-admin , 开源出来!
前端·vue.js·开源
妙码生花17 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(四十五):前端远程下拉输入组件
前端·javascript·vue.js
Listen·Rain19 小时前
AGENTS.md — Vue 3 Frontend Development
前端·javascript·vue.js
南风知我意啊21 小时前
Vue3图片缩放拖拽组件全攻略
前端·javascript·vue.js
万亿少女的梦1681 天前
基于Spring Boot、Vue.js与MySQL的流浪猫狗救助系统设计与实现
vue.js·spring boot·mysql·javaweb·权限管理
早睡早起身体好1231 天前
Vue 3 路由与懒加载入门:从零完成一个迷你学习中心
javascript·vue.js·学习
猫猫不是喵喵.1 天前
Vue 3 项目创建指南:基于 Vue CLI 与 Vite 的两种方式
前端·javascript·vue.js
2401_896732131 天前
用智能体构建企业框架,制作网站
前端·vue.js·智能体
无人生还1 天前
从 Vue3 到 React · 快速上手系列第 8 篇:组件通信与 Context(对标插槽与 provide/inject)
前端·vue.js·react.js