el-table 自定义展开按钮 ,并触发懒加载事件

第一步:首先我们把自带的展开按钮直接隐藏

找到这个元素,直接修改css即可隐藏

::v-deep{
      .el-table__expand-icon{
        display: none !important;
      }
  }

第二步:我们只需要在指定的列里面,通过插槽修改内容

<el-table-column prop="name" :label="$t('姓名')">
      <template v-slot="scope">
        <div class="d-flex align-items-center">
          <div class="table_expand" v-if="scope.row.hasGroup">
            {{ !scope.row.isExpand?"+":'-' }}
          </div>
          <div>{{ scope.row.name }}</div>
        </div>
      </template>
    </el-table-column>

通过接口获取到的数据,追加一个属性isExpand,用来控制当前行是否展开的状态

 const { code, data } = await httpRecipientPage(params)
    if (code === 1) {
      this.tableList = data?.records?.map((v, index) => ({
        ...v,
        isExpand: false,
      }))
    }

样式大家自己自定义哈

第三步：配置row-click 和 expand-change的属性

<el-table
    lazy
    :load="load"
    :key="tableKeys"
    :tree-props="{children: 'children',hasChildren: 'hasChildren'}"
    @row-click="(row,column,e)=>clickRowLoad(row,column,e)"
    @expand-change="expandChange"
    >

通过点击行 去模拟点击展开按钮触发懒加载事件

 clickRowLoad(r, c, e) {
      console.log('r, c, e', r, c, e)
      if (e.currentTarget.firstElementChild.firstElementChild.firstElementChild?.tagName == 'DIV') {
        e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click()
      } else {
        e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click()
      }
    },

为什么要用这个回调呢？因为 expand-change 会在懒加载之后触发，可以避免用户短时间内重复点击按钮导致的bug（我也是亲身经历出来的）

expandChange(row, rows) {
  row.isExpand = !row.isExpand
},

具体这个案列，大家可以结合我的上一篇文章一块阅读哈