Vue.js 实现组织机构选择器：上级部门过滤与动态选择

本示例展示了在 Vue.js 项目中使用 Element UI 的 el-tree-select 组件实现组织机构选择器，并通过过滤操作确保上级部门不能选择当前组织机构自身。同时，使用 computed 属性动态过滤部门列表，并提供自定义过滤函数，使选择器更加灵活易用。

代码示例

<template>
  <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' }' @change='filterNode'
      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>

  <el-form-item label='组织机构名称' prop='deptName'>
    <div class='w-md'>
      <el-input v-model='formData.deptName' placeholder='请输入组织机构名称' />
    </div>
  </el-form-item>
</template>

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

const deptList = ref([]); // 从后端获取的部门列表

const filterDeptList = (parentId: string) => {
  // 进行部门列表的过滤操作，返回过滤后的列表
  return deptList.value.filter((dept) => dept.deptId !== parentId);
};

const filteredDeptList = computed(() => filterDeptList(formData.parentId));

const formData = ref({
  parentId: '', // 上级部门 ID
  deptId: '', // 当前组织机构 ID
  deptName: '', // 组织机构名称
});

const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.deptId !== formData.deptId;
};

</script>

代码解析

过滤上级部门:
- 使用 filterDeptList 函数对后端获取的部门列表进行过滤，确保上级部门不能选择当前组织机构自身。
- 使用 computed 属性 filteredDeptList 动态过滤部门列表，以便在 el-tree-select 中展示过滤后的结果。
动态选择:
- 使用 el-tree-select 组件展示部门列表，并通过 v-model 将选择的部门 ID 绑定到 formData.parentId 上。
- 使用 check-strictly 属性确保只选择一个部门。
- 使用 default-expanded-keys 和 default-checked-keys 属性控制默认展开和选中部门节点。
自定义过滤函数:
- 使用 filterNode 函数实现自定义过滤功能，确保选择的上级部门与当前组织机构无关。

说明

该示例仅展示了基本的过滤逻辑，实际应用中可能需要根据具体需求进行调整。
确保从后端获取的部门列表包含 deptId 和 deptName 属性。
该示例使用 TypeScript 编写，可根据需要修改为 JavaScript。

总结

通过使用 el-tree-select 组件、computed 属性和自定义过滤函数，我们可以轻松实现一个功能强大的组织机构选择器，并通过过滤操作确保上级部门的选择不会出现错误。