vue 去掉table中全选框

### 如何在 Vue 项目中移除 Table 组件中的全选复选框 为了实现在 `Vue` 和 `ElementUI` 中去除表格组件内的全选复选框，可以调整 `<el-table>` 的配置以及修改其关联的方法逻辑。 对于基于 `ElementUI` 的解决方案，在默认情况下，当设置列类型为 `"selection"` 时，该列不仅提供单个记录的选择功能，还会自动加入一个用于全选/取消全选的选项。如果希望禁用这一特性，则可以通过自定义渲染函数来控制每一行前是否显示选择框，并且不在首部添加额外的选择项[^1]。 具体做法如下： #### 修改模板部分 不再使用内置的选择列 (`<el-table-column type="selection">`) 而是通过普通的列定义并利用作用域插槽来自定义每行前面的内容。这样就不会有默认的全选按钮出现了。 ```html <!-- 去掉了 el-table-column 类型为 selection 的标签 --> <el-table :data="tableData"> <!-- 自定义一列用来放置手动创建的选择框 --> <el-table-column> <template slot-scope="scope"> <el-checkbox v-model="checkedItems[scope.$index]" @change="(val) => handleRowClick(scope.row, val)"> {{ '' }} </el-checkbox> </template> </el-table-column> <!-- 其他业务相关字段展示 --> </el-table> ``` #### 数据属性更新 由于不再依赖于框架自带的选择机制，因此需要维护一个新的状态变量来跟踪哪些条目已被选中。这通常是一个布尔类型的数组，长度等于表格的数据量大小，默认初始化为全部未选中。 ```javascript export default { data() { return { checkedItems: Array(this.tableData.length).fill(false), // 初始化所有项目的选中状态都设为 false tableData: [ /* 表格数据 */ ] }; }, }; ``` #### 方法重写 处理点击某一行旁边的手动添加的选择框所触发的变化事件，以便能够单独管理各行的状态而不涉及全局性的全选行为。 ```javascript methods: { handleRowClick(row, value) { const rowIndex = this.tableData.indexOf(row); this.$set(this.checkedItems, rowIndex, value); // 更新特定索引处的选中状态 console.log(`Row ${rowIndex} is now ${value ? 'selected' : 'unselected'}`); // 如果还需要在此基础上做更多操作（比如收集已选ID），则继续扩展此方法体 } } ``` 上述方式实现了对原有全选功能的有效屏蔽，同时也保留了逐行选择的能力。需要注意的是，这样做之后关于多选后的批量操作可能也需要相应调整实现思路，因为失去了原生提供的便捷接口支持。