el-table实现树型表格，并且索引只针对根节点

 <!-- 分类表格 -->
      <el-table :data="cateslist" border row-key="cat_id">
        <!-- 自定义索引列 -->
        <el-table-column label="#" type="index">
          <template v-slot="scope">
            <!-- 判断当前行的数据是否为一级分类，如果不是，则不展示索引 -->
            <span>{{scope.row.cat_level === 0 ? scope.row.index: ''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" prop="cat_name"></el-table-column>
        <el-table-column label="是否有效">
          <template v-slot="scope">
            <i
              class="el-icon-success"
              v-if="!scope.row.cat_deleted"
              style="color: #39ce39"
            ></i>
            <i class="el-icon-error" v-else style="color: red"></i>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template v-slot="scope">
            <el-tag v-if="scope.row.cat_level === 0" effect="dark" size="mini">一级</el-tag>
            <el-tag type="success" v-else-if="scope.row.cat_level === 1" effect="dark" size="mini" >二级</el-tag>
            <el-tag type="warning" v-else effect="dark" size="mini">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>

在获取表格数据cateslist时，给catelist的加上index属性

async getCatesList() {
      const { data: res } = await this.$http.get("categories", {
        params: this.queryInfo,
      });
      if (res.meta.status !== 200)
        return this.$message.error("获取商品分类失败!");
      res.data.result.forEach((item, i) => (item.index = i + 1));
      this.cateslist = res.data.result;
      this.total = res.data.total;
      console.log(this.cateslist);
    },