el-table全选框禁用

### Element UI 中禁用 `el-table` 组件全选框的实现方式 在 Element UI 的 `el-table` 组件中，可以通过多种方法来禁用全选功能。以下是几种常见的实现方式： #### 方法一：通过 CSS 隐藏全选框 可以利用自定义样式隐藏全选框的内容。这种方式不会真正禁用全选逻辑，而是单纯将其从视觉上移除。 ```html <style> .el-table .DisableSelection .cell .el-checkbox__inner { display: none; position: relative; } </style> <el-table :data="tableData"> <el-table-column type="selection" class-name="DisableSelection"></el-table-column> </el-table> ``` 这种方法适用于只需要隐藏全选框而不关心其交互的情况[^1]。 --- #### 方法二：使用自定义表头替代默认全选框 通过替换默认的表头内容，在其中放置一个禁用状态的复选框，从而达到禁用的效果。 ```html <el-table :data="tableData" border> <el-table-column width="50" align="center"> <!-- 自定义表头 --> <template #header> <el-checkbox disabled></el-checkbox> </template> <!-- 行内的复选框保持正常 --> <template #default="scope"> <el-checkbox v-model="scope.row.checked"></el-checkbox> </template> </el-table-column> </el-table> ``` 此方法能够完全控制全选框的行为，并且不影响其他行的选择操作[^2]。 --- #### 方法三：动态判断某些行是否可被选择 如果需要更灵活地控制哪些行可以被选择，则可以在列配置中设置 `:selectable` 属性，传入一个函数用于判定每行是否允许勾选。 ```html <el-table :data="tableDatas"> <el-table-column type="selection" fixed="left" :selectable="checkSelectable"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> </el-table> <script> export default { data() { return { tableDatas: [ { id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" } ] }; }, methods: { checkSelectable(row) { // 如果 row.id 是 1 或者 2 则不允许选择 if (row.id === 1 || row.id === 2) { return false; } else { return true; } } } }; </script> ``` 该方法适合于基于特定业务规则限制部分行无法被选择的情形[^3]。 --- #### 方法四：直接修改表格头部单元格样式 还可以通过对整个表格应用统一的样式调整，间接影响到全选框的表现形式。 ```html <el-table style="width: 100%;" :header-cell-style="{ padding: '', background: '#F6F7FC', color: '#333333', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" @selection-change="handleSelectionChange" > <el-table-column type="selection"></el-table-column> </el-table> ``` 虽然这种做法主要针对的是整体布局优化，但在一定程度上也可以配合其他手段共同作用以达成目标效果[^4]。 --- ### 总结 以上四种方法各有优劣，具体选用哪一种取决于实际需求场景以及项目中的技术约束条件等因素综合考量决定。