Element UI 树形选择器筛选当前节点及子节点

在使用 Element UI 的 el-tree-select 组件时，有时需要实现筛选功能，防止用户选择当前节点或其子节点。本文将提供一个代码示例，并解释如何实现该功能。

代码示例

let thisid = formData.deptId; // 是选择修改的这一行 id

const filterNode = (value, data) => {
  if (!value) return true;

  // 判断当前节点的label是否包含搜索的关键字
  if (data.label.includes(value)) {
    // 判断当前节点是否是【组织机构名称】的子级
    if (data.deptId === thisid || isDescendant(data, thisid)) {
      return false;
    }
    return true;
  }
  return false;
};

const isDescendant = (node, targetId) => {
  if (node.children && node.children.length > 0) {
    for (let i = 0; i < node.children.length; i++) {
      if (node.children[i].deptId === targetId || isDescendant(node.children[i], targetId)) {
        return true;
      }
    }
  }
  return false;
};

代码解释

filterNode 函数接受两个参数：
- value: 用户输入的搜索关键字
- data: 当前正在遍历的树节点
if (!value) return true;：如果用户没有输入任何关键字，则直接返回 true，表示所有节点都应该显示。
if (data.label.includes(value))：判断当前节点的 label 是否包含搜索关键字，如果包含则继续执行下一步判断。
if (data.deptId === thisid || isDescendant(data, thisid))：
- data.deptId === thisid: 判断当前节点是否是当前选中的节点（即需要修改的组织机构名称）
- isDescendant(data, thisid): 调用 isDescendant 函数判断当前节点是否为当前选中节点的子节点。
如果满足上述条件，则返回 false，表示该节点不应该被显示；否则返回 true，表示该节点应该被显示。
isDescendant 函数用来判断一个节点是否为另一个节点的子节点：
- 递归遍历当前节点的所有子节点，判断是否包含目标节点的 deptId。
- 如果找到目标节点，则返回 true；否则返回 false。

总结

通过 filterNode 和 isDescendant 函数的结合，可以实现 Element UI 树形选择器组件的筛选功能，防止用户选择当前节点或其子节点。

注意： 该示例代码只提供了一种实现方式，你可以根据自己的实际需求进行修改和调整。