在实际业务中一个表格往往需要同时支持多种选择操作——例如“批量删除”和“批量导出”各自独立勾选或者需要根据角色、权限展示不同的复选框列。vxe-table 提供了强大的插槽机制允许你完全自定义表头和单元格的内容从而轻松实现多列独立复选框并且每一列的全选、半选状态都可以由业务逻辑单独控制。本文通过一个完整的示例演示如何在 vxe-grid 中实现两列互不干扰的复选框每列都有独立的表头全选及半选状态满足复杂业务场景的需求。实现效果第一列复选框独立状态支持全选/半选/全不选。第二列复选框与第一列完全隔离同样支持独立的全选/半选逻辑。表头复选框点击时全选或清空当前列的所有行当该列部分行选中时表头显示半选状态indeterminate。这种设计非常适合需要同时收集多种用户选择例如“待审批”、“待导出”的场景。核心实现思路利用插槽自定义列在 columns 配置中通过 slots.header 和 slots.default 分别指定表头和单元格使用的具名插槽。行数据存储选中状态每行数据中分别存储 checked1、checked2 等布尔值与 v-model 双向绑定。动态计算全选/半选状态监听行内复选框的 change 事件实时统计当前列选中的行数从而更新对应表头复选框的 v-model 和 indeterminate 状态。批量全选/反选表头复选框变化时遍历当前列所有行统一设置其选中值并重新计算全选/半选状态。代码templatedivvxe-gridv-bindgridOptionstemplate#checked1_headervxe-checkboxv-modelisAllChecked1:indeterminateisIndeterminate1changechangeAll1Event/vxe-checkbox/templatetemplate#checked1_default{ row }vxe-checkboxv-modelrow.checked1changeupdateChecked1State/vxe-checkbox/templatetemplate#checked2_headervxe-checkboxv-modelisAllChecked2:indeterminateisIndeterminate2changechangeAll2Event/vxe-checkbox/templatetemplate#checked2_default{ row }vxe-checkboxv-modelrow.checked2changeupdateChecked2State/vxe-checkbox/template/vxe-grid/div/templatescriptsetupimport{ref,reactive}fromvue// 全选状态true: 全选, false: 全不选constisAllChecked1ref(false)constisAllChecked2ref(false)// 半选状态true: 部分选中, false: 非部分选中constisIndeterminate1ref(false)constisIndeterminate2ref(false)constgridOptionsreactive({border:true,height:500,rowConfig:{keyField:id,isHover:true},columns:[{field:checked1,title:,width:60,slots:{header:checked1_header,default:checked1_default}},{field:name,title:Name},{field:checked2,title:,width:60,slots:{header:checked2_header,default:checked2_default}},{field:role,title:Role},{field:sex,title:Sex},{field:address,title:Address}],data:[{id:10001,name:Test1,role:Develop,sex:Man,age:28,address:test abc,checked1:false,checked2:false},{id:10002,name:Test2,role:Test,sex:Women,age:22,address:Guangzhou,checked1:false,checked2:false},{id:10003,name:Test3,role:PM,sex:Man,age:32,address:Shanghai,checked1:false,checked2:false},{id:10004,name:Test4,role:Designer,sex:Women,age:23,address:test abc,checked1:false,checked2:false},{id:10005,name:Test5,role:Develop,sex:Women,age:30,address:Shanghai,checked1:false,checked2:false},{id:10006,name:Test6,role:Designer,sex:Women,age:23,address:test abc,checked1:false,checked2:false},{id:10007,name:Test7,role:PM,sex:Women,age:38,address:Shanghai,checked1:false,checked2:false},{id:10008,name:Test8,role:Designer,sex:Man,age:24,address:test abc,checked1:false,checked2:false},{id:10009,name:Test9,role:Test,sex:Man,age:35,address:Shanghai,checked1:false,checked2:false},{id:10010,name:Test10,role:Develop,sex:Women,age:31,address:Shanghai,checked1:false,checked2:false},{id:10011,name:Test11,role:PM,sex:Women,age:45,address:Shanghai,checked1:false,checked2:false},{id:10012,name:Test12,role:Test,sex:Man,age:39,address:Guangzhou,checked1:false,checked2:false},{id:10013,name:Test13,role:Develop,sex:Women,age:38,address:Shanghai,checked1:false,checked2:false}]})// 更新第一列复选框的全选和半选状态constupdateChecked1State(){const{data[]}gridOptionsconsttotaldata.lengthif(total0){isAllChecked1.valuefalseisIndeterminate1.valuefalsereturn}constcheckedCountdata.filter((row)row.checked1).length isAllChecked1.valuecheckedCounttotal isIndeterminate1.valuecheckedCount0checkedCounttotal}// 更新第二列复选框的全选和半选状态constupdateChecked2State(){const{data[]}gridOptionsconsttotaldata.lengthif(total0){isAllChecked2.valuefalseisIndeterminate2.valuefalsereturn}constcheckedCountdata.filter((row)row.checked2).length isAllChecked2.valuecheckedCounttotal isIndeterminate2.valuecheckedCount0checkedCounttotal}// 全选/取消全选第一列constchangeAll1Event(){const{data[]}gridOptionsconstnewValueisAllChecked1.value data.forEach((row){row.checked1newValue})// 批量更新后手动更新一次状态避免循环中频繁触发直接最后同步状态updateChecked1State()}// 全选/取消全选第二列constchangeAll2Event(){const{data[]}gridOptionsconstnewValueisAllChecked2.value data.forEach((row){row.checked2newValue})updateChecked2State()}updateChecked1State()updateChecked2State()/script说明插槽命名规范表头插槽名称[列字段]_header单元格插槽名称[列字段]_default在 columns 中通过 slots 对象关联这些插槽名称。全选与半选状态管理全选状态 (v-model)true 表示当前列所有行都被选中。半选状态 (indeterminate)true 表示当前列有部分行被选中但不是全部。vxe-checkbox 组件原生支持这两个属性直接绑定即可。性能注意事项行内复选框的 change 事件中调用 updateCheckedXState 会遍历整个数组计算选中数量对于大量数据如万级可能会影响性能。建议在数据量较大时使用防抖或改用更高效的计算方式如维护一个选中集合。支持动态数据如果表格数据会动态增删例如通过 gridOptions.data 重新赋值需要在数据变化后重新调用 updateCheckedXState 来同步表头状态。https://vxetable.cn