el-table利用type=“expand”根据数据条件埋伏睁开按钮

一：添加className

2. <el-table :data="tableData" border :loading="loading" :row-class-name="getRowClass" @expand-change="expandchange">
3.    <el-table-column type="expand">
4.       <template #default="props">
5.         {{ props.row.expanded ? '收起' : '展开' }}
6.       </template>
7.    </el-table>
9. // 使用getRowClass针对每一行添加类由于我的是根据内容的pcObj长度只有一个隐藏，多个显示。根据自己条件进行更改
11. const getRowClass = (row: any) => {
12.   console.log(row);
13.   let data = row.row;
14.   let res = [];
15.   if (data.pcObj.length > 1) {
16.     res.push('row-expand-has');
17.     return res;
18.   } else {
19.     res.push('row-expand-unhas');
20.     return res;
21.   }
22. }

复制代码

利用完在控制台可以发现row-expand-unhas已添加乐成

二：添加CSS样式埋伏row-expand-unhas的按钮

2. .row-expand-unhas .el-table__expand-column {
3.     pointer-events: none;
4. }
5. .row-expand-unhas .el-table__expand-column .el-icon {
6.     visibility: hidden;
7. }

复制代码

大概在项目中会存在添加样式不起作用，这时就须要用到样式穿透 :deep()

2. :deep(.row-expand-unhas .el-table__expand-column) {
3.   pointer-events: none;
4. }
6. :deep(.row-expand-unhas .el-table__expand-column .el-icon) {
7.   visibility: hidden;
8. }

复制代码