vxe-table多选表格设置父子树形结构不关联并实现全选

vxe-table树形结构通过checkStrictly:true 设置父子节点不互相关联，默认不显示头部复选框

如果需要显示头部复选框需要设置showHeader:true

设置checkStrictly为true的时候全选功能是没法使用的，需要我们手动写一个表头的复选框

treeCheckBox默认设置为false，表示复选框未被选中状态

treeCheckBox默认设置为null，表示有子项选中

treeCheckBox默认设置为true，表示全部选中

 <vxe-table-column
        type="checkbox"
        :width="80"
        fixed="left"
        :tree-node="true"
        field="treeNode"
      >
        <!-- checkbox不联动的时候设置全选按钮，vxe-table不联动全选不能使用 -->
        <template #header>
          <vxe-checkbox
            v-model="treeCheckBox"
            :indeterminate="treeCheckBox == null"
            @change="treeCheckBoxChange"
          ></vxe-checkbox>
        </template>
      </vxe-table-column>

 重写全选框，全选框的状态也需要自动实现，重写全选框后@checkbox-all无法使用，使用@checkbox-change实现全选框的显示状态

selectChangeEvent({records}) {
        if (records.length >= this.tableData.length) {
          this.treeCheckBox = true
        } else if (records.length > 0) {
          this.treeCheckBox = null
        } else {
          this.treeCheckBox = false
        }
      }
    },

checkStrictly:true的情况下，setAllCheckboxRow无法使用，只能使用setCheckboxRow方法，全选涉及到子行无法选中，又进行了遍历实现子行选中

// 设置手动全选
    treeCheckBoxChange({ checked }) {
      if (checked) {
        this.$refs.xTable.setCheckboxRow(this.tableData, true);
        this.setAllCheckboxRow(this.tableData, true);
      } else {
        this.$refs.xTable.clearCheckboxRow()
      }
      this.selectRecords = this.tableData;
    },
    // 处理子结构的全选
    setAllCheckboxRow(nodes, checked) {
      nodes.forEach(node => {
        node.checked = checked;
        if (node.children && node.children.length > 0) {
          this.$refs.xTable.setCheckboxRow(node.children, true)
        }
      });
    },

整体相关逻辑如下： 

<template>
  <div>
    <vxe-table
      ref="xTable"
      :data="tableData"
      row-key
      column-key
      show-overflow
      show-header-overflow
      size="mini"
      highlight-hover-row
      :height="heightSize"
      row-id="rowId"
      auto-resize
      keep-source
      type="checkbox"
      :checkbox-config="{ checkStrictly: true, showHeader: true }"
      :tree-config="{ childrenField: 'children', indent: 10 }"
      @checkbox-change="selectChangeEvent"
    >
      <vxe-table-column
        type="checkbox"
        :width="80"
        fixed="left"
        :tree-node="true"
        field="treeNode"
      >
        <!-- checkbox不联动的时候设置全选按钮，vxe-table不联动全选不能使用 -->
        <template #header>
          <vxe-checkbox
            v-model="treeCheckBox"
            :indeterminate="treeCheckBox == null"
            @change="treeCheckBoxChange"
          ></vxe-checkbox>
        </template>
      </vxe-table-column>

      <vxe-table-column> ..... </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  name: 'Untitled-1',
  props: {},
  components: {},
  data() {
    return {
      tableData: [{
        id:1,
        name:1,
        children:[{
          id:1,
          name:1
        }]
      }]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 设置手动全选
    treeCheckBoxChange({ checked }) {
      if (checked) {
        this.$refs.xTable.setCheckboxRow(this.tableData, true);
        this.setAllCheckboxRow(this.tableData, true);
      } else {
        this.$refs.xTable.clearCheckboxRow()
      }
      this.selectRecords = this.tableData;
    },
    // 处理子结构的全选
    setAllCheckboxRow(nodes, checked) {
      nodes.forEach(node => {
        node.checked = checked;
        if (node.children && node.children.length > 0) {
          this.$refs.xTable.setCheckboxRow(node.children, true)
        }
      });
    },
    // 设置全选框的状态
    selectChangeEvent({records}) {
        if (records.length >= this.tableData.length) {
          this.treeCheckBox = true
        } else if (records.length > 0) {
          this.treeCheckBox = null
        } else {
          this.treeCheckBox = false
        }
      }
    },
  },
}
</script>

<style scoped></style>