解决vxe-table的父子节点不关联(checkStrictly)后没有全选框的问题。

问题：

使用vxe-table的树形表格时，发现勾选父节点也会连带上子节点，使用父子节点不关联后全选框又没了。

解决方法：

发现官方文档在使用checkStrictly后用两个按钮替代：

官方案例.png

自定义复选框（CheckBox）：

        <vxe-column type="checkbox" width="50">
          <template v-if="isTreeTable/**树形表格开启父子不关联后，需自定义复选框 */" #header>
            <vxe-checkbox
              v-model="treeCheckBox"
              :indeterminate="treeCheckBox == null"
              @change="treeCheckBoxChange"
             ></vxe-checkbox>
          </template>
        </vxe-column>

   treeCheckBoxChange({ checked }) {
      if (checked) {
        this.$refs.table.setCheckboxRow(this.tableData, true)
      } else {
        this.$refs.table.clearCheckboxRow()
      }
    }

indeterminate为是否不确定，就是全选和全不选的中间状态，
treeCheckBox：

• treeCheckBox为false时，CheckBox为全不选状态
  
  全不选.png
• treeCheckBox为true时，CheckBox为全选状态
  
  全选.png
• treeCheckBox为null时，CheckBox为不确定状态
  
  不确定.png

通过判断checked是true还是false触发相应的全选和清除事件，就可以完成原有复选框的全选和清除。但选中某一行数据后，全选按钮需要做出相应的状态改变。

通过vxe的checkbox-change事件模拟状态改变

接收checkbox-change事件

      <vxe-table
        :checkbox-config="{checkStrictly: true, showHeader: true }/** 控制子级不可选中、不可操作*/"
        :data="tableData"
        @checkbox-change="handleSelectionChange"
      >

已无法接收checkbox-all事件

    handleSelectionChange({ records }) {
        // 树形表格的自定义选中，判断是否全部选中
        // 三种状态的判断
        if (records.length >= this.tableData.length) {
          this.treeCheckBox = true
        } else if (records.length > 0) {
          this.treeCheckBox = null
        } else {
          this.treeCheckBox = false
        }
    }

这样就与原来的全选按钮没有区别了。