自界说实现 vxe-table 睁开子表格的树布局复选框

在现实业务开发中，我们常常遇到主表格嵌套子表格，且须要在主表和子表上都提供复选框功能，并实现三态联动（全选、半选、未选）。本文将基于 Vue 3 + vxe-table 组件库，手把手教你实现一个支持父子表复选框联动的完备示例。
主表每行都有一个复选框，点击可同时控制其下全部子行；子表内部复选框单独控制，并能反向影响父行状态；表头提供全选/全不选按钮，支持全局批量利用
效果

• 主表行复选框 → 勾选时，该行下全部子行自动勾选；取消时，子行全部取消。
  
• 子表行复选框 → 勾选/取消时，自动更新所属父行的选中状态（全选/半选/未选）。
  
• 表头全选 → 一键选中/取消全部主行及其全部子行。
  
• 半选状态 → 当某个主行下只有部分子行被选中时，该行复选框体现半选（indeterminate）状态；表头同理。
  

实现思绪

vxe-table 提供了强大的模板插槽本领，我们利用三个插槽来实现自界说复选框：

• cell_one_checkbox – 主表每行的复选框插槽
  
• head_one_checkbox – 表头的全选/半选插槽
  
• expand_content – 睁开行内容，内部嵌套子表格，子表格的复选框利用 cell_two_checkbox 插槽
  父子联动逻辑通过以下四个焦点函数完成：
  
• selectAllEvent()：表头全选/全不选
  
• changeOneSelect(row)：主表某行复选框变革
  
• changeTwoSelect(childRow, parentRow)：子表某行复选框变革
  
• checkOneSelectStatus()：更新表头的全选/半选状态
  

代码

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions">
4.       <template #expand_content="{ row }">
5.         
6.           <vxe-grid v-bind="childGridOptions" :data="row.childList">
7.             <template #cell_two_checkbox="{ row: childRow }">
8.               <vxe-checkbox
9.                 v-model="childRow.isChecked"
10.                 :indeterminate="childRow.isHalf"
11.                 @change="changeTwoSelect(childRow, row)"
12.               ></vxe-checkbox>
13.             </template>
14.           </vxe-grid>
15.         
16.       </template>
18.       <template #head_one_checkbox>
19.         <vxe-checkbox
20.           v-model="isAllChecked"
21.           :indeterminate="isAllHalf"
22.           @change="selectAllEvent"
23.         ></vxe-checkbox>
24.       </template>
25.       <template #cell_one_checkbox="{ row }">
26.         <vxe-checkbox
27.           v-model="row.isChecked"
28.           :indeterminate="row.isHalf"
29.           @change="changeOneSelect(row)"
30.         ></vxe-checkbox>
31.       </template>
32.     </vxe-grid>
33.   
34. </template>

复制代码

数据字段操持

每行数据（主行和子行）都须要包罗两个字段：

• isChecked：Boolean，是否选中
  
• isHalf：Boolean，是否半选状态（仅用于界面展示，vxe-checkbox 的 indeterminate 属性）
  

子行通过 childList 数组与父行关联。
数据状态

• 父行全选：全部子行 isChecked === true
  
• 父行半选：不是全选 且 至少有一个子行被选中
  
• 父行未选：全部子行 isChecked === false
  

https://vxetable.cn

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.