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