解决el-tree数据回显时子节点部分选中父节点都全选中问题

在使用Element UI的el-tree组件时，如果你遇到了数据回显的问题，即子节点被选中时，相应的父节点也被自动选中，可以通过监听node-click事件并使用setCheckedKeys或setCheckedNodes方法来控制选中状态的同步。

以下是一个简单的示例代码，展示了如何解决这个问题：

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    ref="tree"
    :props="defaultProps"
    @check="handleCheck"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        // ...你的树形数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleCheck(data, checked, indeterminate) {
      if (checked && data.children && data.children.length > 0) {
        // 当前节点被选中且有子节点时，选中所有子节点
        this.checkAllChildNodes(data.children, true);
      }
      // 获取所有选中的节点
      const checkedKeys = this.$refs.tree.getCheckedKeys();
      // 获取所有半选中的节点
      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
      // 若父节点不在选中列表中，则将其设置为半选中状态
      if (!checkedKeys.includes(data.parentId)) {
        this.$refs.tree.setChecked(data.parentId, false, true);
        halfCheckedKeys.push(data.parentId);
      }
    },
    checkAllChildNodes(childrenData, checked) {
      childrenData.forEach(item => {
        this.$refs.tree.setChecked(item.id, checked, false);
        if (item.children && item.children.length > 0) {
          this.checkAllChildNodes(item.children, checked);
        }
      });
    }
  }
};
</script>

在这个示例中，当你点击一个节点时，handleCheck方法会被触发。如果节点被选中并且它有子节点，那么所有子节点都会被选中。然后，代码检查父节点是否也应该被选中；如果不是，则将其设置为半选中状态。这样就可以避免自动勾选父节点的问题。