使用 filterNode 函数过滤 Element UI TreeSelect 中的节点

使用 filterNode 函数过滤 Element UI TreeSelect 中的节点

Element UI 的 TreeSelect 组件提供了一个 filter-node-method 属性，可以用来过滤树形结构中的节点。我们可以自定义一个函数来实现过滤逻辑，例如以下代码示例展示了如何过滤与 formData.deptName 相同的节点以及其子节点：

const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  if (data.label === value) return false; // 如果节点的 label 与 formData.deptName 相等，则不显示
  if (data.children) {
    // 递归过滤子节点
    return !data.children.some(child => !filterNode(value, child));
  }
  return true;
};

在模板中，将 filterNode(formData.deptName) 绑定到 filter-node-method 属性上，即可使用 formData.deptName 来过滤 filteredDeptList：

<el-form-item label="上级部门" prop="parentId" v-if="formData.parentId !== '0'">
  <el-tree-select ref="treeRef" v-model="formData.parentId" clearable :data="filteredDeptList" node-key="deptId"
    check-strictly :default-expanded-keys="[formData.parentId]" :default-checked-keys="[formData.parentId]"
    :props="{ label: 'deptName', value: 'deptId' }" :filter-node-method="filterNode(formData.deptName)" :suffix-icon="CaretBottom"
    style="width: 450px" />
</el-form-item>
<el-form-item label="上级部门" prop="parentId" v-else>
  <el-input v-model="formData.parentId" style="width: 450px"></el-input>
</el-form-item>

这样，如果 formData.deptName 包含在选中的节点中，就不会显示 formData.deptName 和其子级内容。