el-table使用type=“expand”根据数据条件隐藏展开按钮
一：添加className
<el-table :data="tableData" border :loading="loading" :row-class-name="getRowClass" @expand-change="expandchange">
<el-table-column type="expand">
<template #default="props">
{{ props.row.expanded ? '收起' : '展开' }}
</template>
</el-table>
// 使用getRowClass针对每一行添加类由于我的是根据内容的pcObj长度只有一个隐藏，多个显示。根据自己条件进行更改
const getRowClass = (row: any) => {
console.log(row);
let data = row.row;
let res = [];
if (data.pcObj.length > 1) {
res.push('row-expand-has');
return res;
} else {
res.push('row-expand-unhas');
return res;
}
}
操作完在控制台可以发现row-expand-unhas已添加成功
二：添加CSS样式隐藏row-expand-unhas的按钮
.row-expand-unhas .el-table__expand-column {
pointer-events: none;
}
.row-expand-unhas .el-table__expand-column .el-icon {
visibility: hidden;
}
可能在项目中会存在添加样式不起作用，这时就需要用到样式穿透 :deep()
:deep(.row-expand-unhas .el-table__expand-column) {
pointer-events: none;
}
:deep(.row-expand-unhas .el-table__expand-column .el-icon) {
visibility: hidden;
}