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;
}