el-table树形数据序号展示

el-table树形数据序号展示

最终效果图：

1. 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
				]
			},
		]
	}
}

2. 序号列绑定自定义的字段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
      }
  },