vue3 + element plus el-table expand 实现按钮展开行 且在展开时查询数据

通过点击详情按钮展开行而不是左侧的小图标

1. 首先把左侧的小图标隐藏调 给type="expand"列 设置 width="1"
   这个时候还有一点小图标 在css中加入代码 :deep(.el-table__expand-icon) { display: none; }即可隐藏

2. 隐藏后expand-change会失效，所以我们在每行中加上按钮

            <el-table-column label="操作" width="160" align="center">
              <template #default="scope">
                <el-button size="small" @click="handleDetails(scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>

3. 为el-table绑定ref来获取这个方法，同时绑定每行的展开行数据来源props.row.expendList
   完整HTML代码如下

          <el-table
            ref="revRef"
            :data="tableData.list"
            :max-height="300"
            row-key="id"
          >
            <el-table-column type="expand" width="1">
              <template #default="props">
                <el-table:data="props.row.expendList">
                  <el-table-column prop="id" label="序号" align="center"></el-table-column>
                  <el-table-column label="编号" prop="number" />
                  <el-table-column label="任务类型" prop="type" />
                  <el-table-column label="创建时间" prop="createTime" />
                  <el-table-column label="开始执行时间" prop="beginTime" />
                  <el-table-column label="完成时间" prop="doneTime" />
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="序号" width="100" align="center"></el-table-column>
            <el-table-column label="名称" prop="name" />
            <el-table-column label="城市" prop="city" />
            <el-table-column label="地址" prop="address" />
            <el-table-column label="操作" width="160" align="center">
              <template #default="scope">
                <el-button size="small" @click="handleDetails(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>

4. 通过官方文档可以看toggleRowExpansion这个属性，利用这个属性一样可以实现行的展开折叠效果
   为了避免展开行数据重复，我们在每行中加入新属性expendList存放展开行数据，与表格中的数据来源相对应，js代码如下
   

	const revRef = ref();
    function handleDetails(row) {
     Service.getList(row.id).then((res) => {
       row["expendList"] = res.data;
       revRef.value.toggleRowExpansion(row);
     });
   }

这样就完成啦！