el-table树形数据序号展示

最新推荐文章于 2025-07-16 10:52:35 发布

原创最新推荐文章于 2025-07-16 10:52:35 发布 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

本文介绍了如何在Vue项目中使用ElementUI的el-table组件展示树形数据，重点讲解了如何设置row-key和tree-props属性，以及如何通过自定义方法计算并显示每个节点的序号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table树形数据序号展示

最终效果图：
在这里插入图片描述

el-table中通过设置 row-key="id" :tree-props="{children: 'subList'}" :default-expand-all="true"实现树状展示数据。

 <el-table
     :data="list"
     row-key="id"
     :tree-props="{children: 'subList'}"
     :default-expand-all="true"
   >
     <el-table-column
       prop="parentIndex" 
       label="序号"
       width="300"
       align="left">
     </el-table-column>
     <el-table-column
       prop="name"
       label="评价指标"
       width="300"
       align="left"
       show-overflow-tooltip
     />
</table>

data(){
	return {
	    // 表格数据
		list:[
			{
				name:undefined,
				parentIndex: undefined,
				subList: [
					name:undefined,
					parentIndex: undefined,
					subList: null
				]
			},
			{
				name:undefined,
				parentIndex: undefined,
				subList: [
					name:undefined,
					parentIndex: undefined,
					subList: null
				]
			},
		]
	}
}

序号列绑定自定义的字段prop="parentIndex" ，控制数据序号的展示；
实现方式： 通过接口获取数据时调用setParentIndex方法，并将接口返回的列表数据传入，重新处理数据，为每项数据增加parentIndex字段。

    setParentIndex(list){
      list.forEach((item, index) => {
          item.parentIndex = index + 1 + ''
          if(item.subsetList && item.subsetList.length > 0){
              this._setParentIndex(item, item.parentIndex)
          }
      });
    },
    _setParentIndex(item, oldIndex){
      if (item.subsetList && item.subsetList.length > 0) {
          item.subsetList.forEach((subItem, i) => {
            subItem.parentIndex = oldIndex + '.' + (i + 1);
            this._setParentIndex(subItem, subItem.parentIndex);
          });
      }else {
        return
      }
  },