element UI的Table表格,遇到树形数据展示,父级数据显示序号,子项数据不展示序号

先展示最终效果

思路

给父级项添加标志符isIndex为true,父级项动态添加属性parentIndex,值为父级每一项数据的索引+1

渲染时,不要使用type="index",否则会导致子项影响父级的序号,prop绑定动态添加的属性parentIndex,使用插槽判断标志符scope.row.isIndex,插槽的值为scope.row.parentIndex

详见代码

 代码

<el-table
          ref="table"
          row-key="id"
          size="medium"
          height="100%"
          border
          :data="tableData"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          style="width: 100%"
        >
          <el-table-column width="70" label="序号" prop="parentIndex">
            <template slot-scope="scope">
              <span v-if="scope.row.isIndex">{{scope.row.parentIndex}}</span>
            </template>
          </el-table-column>
</el-table>

// 查询
    async getList(current) {
      //正常调接口拿数据
      if (current) this.search.current = current;
      const { code, data = [] } = await InspectionTrackPageApi({
        ...this.search,
      });
      let tableData = [];
      let total = 0;
      if (code === 200 || code === '200') {
        for (const item of data.data) {
          item.parent = item.parentId;
          if (
            item.parent === '' ||
            item.parent === undefined ||
            item.parent === null
          ) {
            item.parentId = '';
          }
        }
        tableData = treeDataTranslate(data.data) || [];
         // 核心代码核心代码核心代码核心代码核心代码
        tableData.forEach((item, index) => {
          item.isIndex = true;
          item.parentIndex = index + 1;
        });
        total = data.total;
      }
      this.tableData = tableData;
      this.total = total;
    },