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

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

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

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

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

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

 <vxe-table-columntype="checkbox":width="80"fixed="left":tree-node="true"field="treeNode"><!-- checkbox不联动的时候设置全选按钮，vxe-table不联动全选不能使用 --><template #header><vxe-checkboxv-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-tableref="xTable":data="tableData"row-keycolumn-keyshow-overflowshow-header-overflowsize="mini"highlight-hover-row:height="heightSize"row-id="rowId"auto-resizekeep-sourcetype="checkbox":checkbox-config="{ checkStrictly: true, showHeader: true }":tree-config="{ childrenField: 'children', indent: 10 }"@checkbox-change="selectChangeEvent"><vxe-table-columntype="checkbox":width="80"fixed="left":tree-node="true"field="treeNode"><!-- checkbox不联动的时候设置全选按钮，vxe-table不联动全选不能使用 --><template #header><vxe-checkboxv-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>