一:添加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;
}