Element Plus el-tree-select 组件实现选择父级或兄弟级，禁用自己和子集

你想在使用 Element Plus 的 <el-tree-select> 组件时，只显示上级部门或兄弟部门，并禁用自己和自己的子集吗？本文将为你提供解决方案。

示例代码：

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

<script>
import { ref, computed } from 'vue';
import { Tree } from 'element-plus';

export default {
  setup() {
    const deptList = ref<DeptPageVO[]>([]);

    const formData = ref({
      parentId: null, // 初始值为null
      // 其他表单数据...
    });

    // 过滤部门列表，只显示父级或兄弟级部门，并禁用自己和自己的子集
    const filteredDeptList = computed(() => {
      const parentId = formData.value.parentId;
      if (parentId) {
        return deptList.value.filter(dept => dept.id !== parentId && dept.parentId !== parentId);
      } else {
        return deptList.value;
      }
    });

    // 过滤方法
    const filterNode = (value: string, data: Tree) => {
      if (!value) return true;
      return data.label.includes(value);
    };

    return {
      deptList,
      formData,
      filteredDeptList,
      filterNode,
    };
  },
};
</script>

实现原理：

filteredDeptList 计算属性： 通过计算属性 filteredDeptList，根据当前选择的 parentId 对部门列表进行过滤，只保留父级或兄弟级部门，并排除自己和自己的子集。
filterNode 过滤方法： 该方法用来过滤下拉菜单中显示的部门列表。当 value 为空时，显示所有部门；否则，仅显示标签包含 value 的部门。
check-strictly 属性： 该属性用于控制树形选择组件的选择行为，设置为 true 表示只能选择一级节点，不能同时选择父节点和子节点。

代码说明：

deptList：存储所有部门列表的响应式数据。
formData：用于存储表单数据的响应式数据，其中 parentId 表示当前选择的父级部门 ID。
filterNode：自定义的过滤方法，用于筛选部门列表。
filteredDeptList：计算属性，根据 parentId 过滤后的部门列表。

使用说明：

将代码中的 deptList 替换为你实际的部门列表数据。
将 formData 中的 parentId 替换为你需要绑定的表单数据。
将 deptName 和 deptId 替换为你部门数据中对应的属性名称。
在需要使用 <el-tree-select> 组件的地方引入并使用代码。

总结：

通过自定义 filteredDeptList 计算属性和 filterNode 过滤方法，我们可以轻松地实现 <el-tree-select> 组件的选择父级或兄弟级，禁用自己和子集的功能。这使得我们能够更加灵活地控制下拉菜单的显示内容，提高用户体验。

注意： 以上代码示例仅供参考，实际使用时可能需要根据具体业务逻辑进行调整。

Element Plus el-tree-select 组件实现选择父级或兄弟级，禁用自己和子集