el-tree父子节点联动勾选方法

本文介绍了基于Element UI的el-tree组件实现父子节点联动勾选的方案。通过监听`check-change`事件，结合自定义逻辑判断，实现当勾选子节点时自动勾选父节点，以及当取消勾选父节点时，若存在其他子节点被勾选则重新勾选父节点的功能。文章详细分析了需求，并提供了完整的代码示例及运行效果，帮助开发者快速掌握el-tree自动勾选的实现方法，解决父子节点联动勾选问题。

el-tree 自动勾选功能实现

在 el-tree 中，同一层级下的节点可以勾选。本文将介绍如何在满足一定条件时自动勾选其他节点。

需求分析

• 勾选 x-1 节点时，如果 x-0 未勾选，则自动勾选 x-0。
• 取消勾选 x-0 节点时，只要存在与 x-0 同级别的其他勾选的 x-n 节点（其中 n !== 0），则重新勾选 x-0。

解决方案

在 check-change 事件中进行判断并处理：

const handleCheckChange = (data, checked) => {
  const [type, index] = data.label.split('-');
  const checkedNodes = treeRef.value.getCheckedNodes();

  // x-n被勾选，且x-0没被勾选，则勾选x-0
  if (checked && index !== '0' && !checkedNodes.some(it => it.label === `${type}-0`)) {
    treeRef.value.setChecked(`${type}-0`, true);
  }

  // x-0取消勾选，且有x-n被勾选，则重新勾选x-0
  if (!checked && index === '0' && checkedNodes.some(it => it.label !== `${type}-0` && it.label.startsWith(`${type}-`))) {
    treeRef.value.setChecked(`${type}-0`, true);
  }
}

这段代码首先根据节点标签中的横杠（-）来拆分出类型（type）和索引（index）。然后检查勾选状态以及是否满足自动勾选的条件。

代码实现效果如下：

• 勾选 2-1 节点时，自动勾选 2-0 节点。
• 勾选 3 节点时，自动勾选 3-0 节点。
• 取消勾选 2-0 节点时，只要其他 2-n 节点（n !== 0）仍已勾选，就会重新勾选 2-0 节点。
• 如果 2-0 和 3-0 节点同时勾选，点击其中任意一个节点都无法取消勾选，因为它们形成了一个闭环。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。