通过点击详情按钮展开行而不是左侧的小图标
-
首先把左侧的小图标隐藏调 给
type="expand"
列 设置width="1"
这个时候还有一点小图标 在css中加入代码:deep(.el-table__expand-icon) { display: none; }
即可隐藏 -
隐藏后
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>
- 为
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>
- 通过官方文档可以看
toggleRowExpansion
这个属性,利用这个属性一样可以实现行的展开折叠效果
为了避免展开行数据重复,我们在每行中加入新属性expendList
存放展开行数据,与表格中的数据来源相对应,js代码如下
const revRef = ref();
function handleDetails(row) {
Service.getList(row.id).then((res) => {
row["expendList"] = res.data;
revRef.value.toggleRowExpansion(row);
});
}
这样就完成啦!