element ui 树形数据Table组件的索引父级和子级各自按各自排序

项目中使用了element ui 树形数据Table组件，原本做的页面是直接使用了type=index，即每一行索引加一。

后需求说父级和子级要各自安各自排序，翻了文档也没有找到什么方法，只能自己写了。

做完后的效果：

 代码如下：

<el-table-column type="index" width="60" label="序号" align="center">
    <template slot-scope="scope">
        <!-- scope.row.parentId == 0，父级 -->
        <div v-if="scope.row.parentId == 0">{{indexList[scope.$index]}}</div>
    </template>
</el-table-column>
<el-table-column prop="taskName" label="任务名称" header-align="center">
    <template slot-scope="scope">
        <!-- scope.row.parentId != 0，子级 -->
        <span v-if="scope.row.parentId != 0">
            {{indexList[scope.$index]+ '、'}}
        </span>
        <span class="inlin-block">其他</span>
    </template>
</el-table-column>

data() {
    return {
      indexList: [],//序号数组
    };
  },


getList(){
      this.indexList = [];
      listJobTaskComprehensive().then(res => {
        if(res.status == 'error'){
          this.$message.error('数据查询失败');
          this.tableData = [];
          return
        }
        this.tableData = res.data.list || [];
        const getIndex = (data, index) => {
          this.indexList.push(index + 1)
          if(data.children){
            data.children.map((item, index) => getIndex(item, index))
          }
        }
        this.tableData.map((item, index) => getIndex(item, index))
      })
    },

如果序号列的v-if去掉，任务名称列的第一个span去掉，序号也是父级和子级各排各的，就是不太好区分。如下图

 代码如下：

<el-table-column type="index" width="60" label="序号" align="center">
    <template slot-scope="scope">
        <div>{{indexList[scope.$index]}}</div>
    </template>
</el-table-column>

//其他代码如上