Element UI TreeSelect 筛选功能实现：排除当前节点及子节点

本文介绍了在 Element UI 的 TreeSelect 组件中，如何实现筛选功能，并排除当前节点及其子节点的代码示例。

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) {
    for (let child of node.children) {
      if (child.deptId === targetId || isDescendant(child, targetId)) {
        return true;
      }
    }
  }
  return false;
};

代码说明：

filterNode 函数用于筛选 TreeSelect 中的节点，参数 value 是搜索关键字，参数 data 是当前节点的数据。
首先判断搜索关键字是否为空，如果为空则返回 true，表示显示所有节点。
然后判断当前节点的 label 是否包含搜索关键字，如果包含则进一步判断该节点是否是目标节点 thisid 或其子节点。
isDescendant 函数用于递归判断当前节点是否是目标节点 thisid 的子节点，如果判断结果为真则返回 false，表示排除该节点。

使用场景：

在组织机构管理系统中，用户修改组织机构信息时，需要在「上级部门」下拉菜单中排除当前组织机构及其子节点，防止出现循环引用。

注意事项：

isDescendant 函数可以根据实际情况进行调整，例如增加对 deptId 的判断条件等。
确保 thisid 是有效的组织机构 ID。
将代码中的 // 注释替换为 /* */ 块注释，以符合规范。

希望本文对你有所帮助，更多 Element UI 组件使用技巧，请参考官方文档：https://element.eleme.cn/#/zh-CN/component/tree-select