Element UI TreeSelect 组件如何过滤掉自身节点

在使用 Element UI 的 TreeSelect 组件时，你可能需要实现一个功能，在下拉菜单中不显示自身节点。例如，在部门选择中，你希望用户可以选择上级部门，但不能选择自身部门。

你可以通过修改 filterNode 方法来实现这个功能。在 filterNode 方法中，你可以添加一个条件来排除当前部门的节点。

以下是一个修改后的代码示例：

const filterNode = (value: string, data: DeptPageVO, node: any) => {
  if (!value) return true;
  return data.deptName.includes(value) && node.data.deptId !== formData.parentId;
};

<el-form-item label="上级部门" prop="parentId">
  <el-tree-select
    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"
    :suffix-icon="CaretBottom"
    style="width: 450px"
  />
</el-form-item>

在修改后的 filterNode 方法中，我们添加了一个条件 node.data.deptId !== formData.parentId 来判断当前节点是否为当前部门，如果是当前部门，则排除该节点。

这样，在下拉菜单中就不会显示自身部门了。