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

ゝ一纸荒年。 2024-04-01 11:46 16阅读 0赞

#### 实现效果 ####

![在这里插入图片描述][3fca643f31724b5da989d9a09108d089.png]

#### 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自定义展开收起图标 ####

[3fca643f31724b5da989d9a09108d089.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2a77e56c75dc4be4823dd8f5dcda30cd.png