Vue ElementUI el-tree-select 下拉菜单不显示当前部门 - 解决方案

Vue ElementUI el-tree-select 下拉菜单不显示当前部门 - 解决方案

本文将介绍如何解决 Vue ElementUI 中 el-tree-select 下拉菜单不显示当前部门的问题，并提供代码示例。

问题:

在使用 el-tree-select 组件时，希望下拉菜单中不显示当前部门。

解决方案:

1. 定义 filterDeptList 函数: 首先需要定义一个函数 filterDeptList，用于过滤部门列表，排除当前部门。

2. 修改 filterNode 函数: 在 filterNode 函数中添加判断条件，确保当前部门不会被显示。

代码示例:

const deptList = ref<DeptPageVO[]>([]); // 部门列表数据

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

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

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

<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>

解释:

• filterDeptList 函数接受一个 parentId 参数，它会过滤 deptList 列表，并返回一个新的列表，其中不包含 parentId 所对应的部门。
• filteredDeptList 是一个计算属性，它会根据 formData.parentId 的值动态调用 filterDeptList 函数，并返回过滤后的部门列表。
• 在 filterNode 函数中，我们并没有添加任何额外的判断条件，因为过滤操作已经在 filteredDeptList 中完成。

错误解释:

代码中的错误 “filterDeptList 未定义” 是因为在 computed 属性中引用了未定义的函数 filterDeptList。现在，我们已经定义了该函数，这个错误就应该被解决了。

注意:

• 请根据实际情况修改代码，确保函数名和数据结构等部分正确无误。
• 如果您还有其他问题，请随时提问。