[vxe-table el-tree] 树表格：选中子节点，父节点无影响；选中父节点，子节点被选中，el-tree也同理

533_2026-03-25 8:34

树表格：选中子节点，父节点无影响；选中父节点，子节点被选中，el-tree也同理

设置父子不关联，checkStrictly=true;

点击某个节点的多选框时，如果有子节点，递归设置子节点的checkbox选中/不选中

html 复制代码

<vxe-grid
  ref="xGrid"
  :data="tableData"
  :columns="columns"
  :tree-config="treeConfig"
  :checkbox-config="{ checkStrictly: true }"
  @checkbox-change="handleCheckboxChange"
/>

javascript 复制代码

tableData: [
   {
     id: 1,
     name: '父节点1',
     children: [
       { 
         id: 2, 
         name: '子节点1-1',
         children: [
           { id: 4, name: '孙节点1-1-1' }
         ]
       },
       { id: 3, name: '子节点1-2' }
     ]
   }
 ],
 treeConfig: {
   children: 'children',
   expandAll: true
 },
 columns: [
   { type: 'checkbox', width: 60, treeNode: true },
   { field: 'name', title: '名称' }
 ]

javascript 复制代码

handleCheckboxChange({ checked, row }) {
  // 如果有子节点，递归设置所有子孙节点
  if (row.children && row.children.length) {
    this.setAllChildren(row.children, checked)
  }
},

// 递归设置所有子节点
setAllChildren(children, checked) {
  const $table = this.$refs.xGrid
  children.forEach(child => {
    $table.setCheckboxRow(child, checked)
    if (child.children && child.children.length) {
      this.setAllChildren(child.children, checked)
    }
  })
}