el-tree节点勾选：实现特定条件自动勾选与父节点取消后子节点保持勾选

Element UI的el-tree组件是Vue.js项目中常用的树形控件，但在实际开发中我们经常需要实现一些特殊的勾选逻辑。本文将详细介绍如何实现两种常见需求：特定条件下的自动勾选，以及取消父节点时保持子节点勾选状态。

一、特定条件下的自动勾选实现

在某些业务场景下，我们需要根据特定条件自动勾选某些节点。以下是实现方法：

// 在mounted或数据加载完成后调用
this.$nextTick(() => {
  // 遍历树节点
  this.treeData.forEach(node => {
    // 根据业务条件判断是否需要勾选
    if (node.someCondition) {
      this.$refs.tree.setChecked(node.id, true);
    }
  });
});

二、取消父节点后保持子节点勾选状态

默认情况下，el-tree在取消父节点时会自动取消所有子节点。要改变这一行为，可以通过以下方式实现：

// 监听check-change事件
<el-tree
  ref="tree"
  :data="treeData"
  show-checkbox
  node-key="id"
  @check-change="handleCheckChange"
></el-tree>

methods: {
  handleCheckChange(data, checked, indeterminate) {
    if (!checked && data.children) {
      // 父节点被取消勾选时，手动保持子节点勾选
      this.$refs.tree.setCheckedNodes([
        ...this.$refs.tree.getCheckedNodes(),
        ...data.children
      ]);
    }
  }
}

三、完整解决方案

结合上述两种需求，我们可以实现一个更完善的解决方案：

export default {
  data() {
    return {
      treeData: [],
      defaultCheckedKeys: []
    };
  },
  mounted() {
    this.loadTreeData();
  },
  methods: {
    async loadTreeData() {
      // 获取树数据
      const res = await getTreeData();
      this.treeData = res.data;
      
      // 自动勾选符合条件的节点
      this.$nextTick(() => {
        this.autoCheckNodes();
      });
    },
    autoCheckNodes() {
      const checkedNodes = [];
      
      const traverse = (nodes) => {
        nodes.forEach(node => {
          if (node.someCondition) {
            checkedNodes.push(node);
          }
          if (node.children) {
            traverse(node.children);
          }
        });
      };
      
      traverse(this.treeData);
      this.$refs.tree.setCheckedNodes(checkedNodes);
    },
    handleCheckChange(data, checked) {
      if (!checked && data.children) {
        const currentChecked = this.$refs.tree.getCheckedNodes();
        const childrenChecked = data.children.filter(child => 
          currentChecked.some(node => node.id === child.id)
        );
        
        this.$refs.tree.setCheckedNodes([
          ...currentChecked.filter(node => node.id !== data.id),
          ...childrenChecked
        ]);
      }
    }
  }
};

四、注意事项

1. 确保每个节点都有唯一的node-key
2. 处理大数据量时考虑性能优化
3. 复杂的勾选逻辑建议使用check-strictly属性
4. 注意处理异步加载节点的情况

通过以上方法，您可以灵活控制el-tree的勾选行为，满足各种业务场景的需求。如需进一步定制，可以参考Element UI官方文档中关于tree组件的详细API说明。