解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题

<template>
  <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    default-expand-all
    :props="defaultProps"
    :check-strictly="true"
    @check="handleCheckChange"
  >
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // 树形结构数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleCheckChange(nodeObj, treeNode) {
      const checkedNodes = treeNode.checkedKeys;
      const halfCheckedNodes = treeNode.halfCheckedKeys;
      const allCheckedKeys = [...checkedNodes, ...halfCheckedNodes];
 
      // 如果选中的节点数量与总节点数量相等，则全选按钮选中
      const totalNodes = this.data.map(item => item.id);
      this.isIndeterminate = allCheckedKeys.length > 0 && allCheckedKeys.length < totalNodes.length;
      this.checkAll = allCheckedKeys.length === totalNodes.length;
    }
  }
};
</script>

这个代码实例展示了如何在Vue 3和Element Plus中使用el-tree组件处理树形表格的全选和多选问题。通过:check-strictly="true"确保子节点的选中状态不会影响父节点的选中状态，并且使用@check事件监听节点的选中情况，以便控制全选按钮的状态。