element-plus2.5.10版本el-table树形数据设置自定义展开收起图标与插槽图标-第一级才设置索引

实现效果

template代码如下

使用插槽方式设置文本前面的图片，区分有子数据和没有子数据的图片

   <el-table
              :data="tree"
              stripe
              border
              row-key="id"
              style="width: 100%; height: calc(70vh - 100px)"
              highlight-current-row
              header-cell-class-name="header"
              :tree-props="{ children: 'children' }"
            >
              <el-table-column label="序号" type="index" align="center" width="70" :index="indexMethod" />
              <el-table-column prop="name" label="任务名称" align="left" width="300">
                <template #default="{ row }">
                  <span class="flex">
                    <img :src="requireImg('tree/2.png')" class="split" v-if="row.children && row.children.length" />
                    <img :src="requireImg('tree/3.png')" class="split1" v-else />
                    {{ row.name}}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="cent" label="进度" align="center" />
              <el-table-column prop="time" label="完成日期" align="center" />
            </el-table>

自定义序号

默认情况下，el-table是所有行都会设置序号
而需求是子数据不设置序号，只有第一级的节点才设置序号，如最上方图片显示的那样
所以上方代码中序号绑定了一个自定义方法indexMethod，返回自定义的index
我的思路是，后端传的是树结构数据，我进行扁平化，只有第一级设置index属性，从而indexMethod返回相应index

  /** 获取树表格数据 */
    async treeData() {
      // 调用后端接口
      const { data: res } = await http.post(`message/treeData`)
      if (res.code === 0) {
        // 只有第一级才设置index，用于indexMethod方法中自定义表格索引
        res.data.forEach((item, index) => {
          item.index = index + 1
        })
        // 树数组转扁平数组，用于indexMethod方法中判断表格索引
        function treeToArray(data) {
          const arr = []
          function recursiveFunction(data) {
            for (let i = 0; i < data.length; i++) {
              arr.push(data[i])
              if (data[i].children && data[i].children.length) {
                recursiveFunction(data[i].children)
              }
            }
          }
          recursiveFunction(data)
          return arr
        }
        this.treeArr = treeToArray(res.data)
        this.tree = res.data
      }
    },
    /** 自定义表格index */
    indexMethod(index) {
      return this.treeArr[index].index ? this.treeArr[index].index : ""
    },

css自定义展开收起图标

<style lang="scss" scoped>
/* 设置表头背景色 */
:deep(.header) {
  background-color: #eef5f5 !important;
}
:deep(.el-table) {
  /* 解决索引不居中的问题 */
  .cell {
    display:flex;
    align-items:center;
    padding: 5px 0px;
  }

  .el-table__placeholder {
    display: none;
  }

  .is-center {
    .cell {
      justify-content: center;
    }
  }

  .is-left {
    .cell {
      padding-left: 30px;
    }
  }

  .split {
    margin-right: 7px;
  }

  .split1 {
    margin-left: 30px;
    margin-right: 7px;
  }

  /* 替换默认展开收起图片 */
  /* prettier-ignore */
  .el-table__expand-icon {
    width: 16PX;
    height: 16PX;
    background: url("~@assets/imgs/tree/8.png") no-repeat;
    background-size: 100% 100%;

    .el-icon {
      display: none;
    }
  }
  .el-table__expand-icon--expanded {
    transform: none;
    background: url("~@assets/imgs/tree/9.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>