Vue.js 中使用 el-tree-select 组件实现部门选择功能的常见问题排查

本文档介绍了在 Vue.js 项目中使用 Element UI 的 el-tree-select 组件实现部门选择功能时，常见的上级部门下拉菜单显示“无数据”问题的排查思路和方法。

代码示例:

const deptList = ref<DeptPageVO[]>([]); // 部门列表数据
const filteredDeptList = computed(() => filterDeptList(formData.parentId));//每当 formData.parentId 发生变化时，filteredDeptList 的值会自动更新，以反映新的过滤后的部门列表。

// 过滤部门列表
const filterDeptList = (parentId) => {
  if (!parentId) {
    return deptList.value; // 如果 parentId 为空，显示完整的部门列表
  } else {
    const parentDept = deptList.value.find((dept) => dept.deptId === parentId);
    if (parentDept) {
      // 过滤掉自己和自己的子集
      return deptList.value.filter((dept) => dept.deptId !== parentId && parentDept.deptPath && !dept.deptPath.startsWith(parentDept.deptPath));
    } else {
      return deptList.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>

问题描述:

上级部门中只显示自己的父级，点击下拉菜单显示“无数据”内容。

排查思路:

根据代码和描述，问题可能出在以下几个地方：

**检查 deptList 是否有正确的数据。**确保 deptList 中有正确的部门列表数据。
**检查 filteredDeptList 是否正确计算。**在计算 filteredDeptList 时，确保 deptList.value 中有正确的数据，并且 formData.parentId 有正确的值。可以在计算属性 filteredDeptList 中加入调试语句，打印出 deptList.value 和 formData.parentId 的值，以确保它们的值正确。
**检查 filterDeptList 方法是否正确处理 parentId 为空的情况。**在 filterDeptList 方法中，当 parentId 为空时，应该返回完整的部门列表。可以在方法中添加调试语句，打印出 parentId 的值，以确保它的值正确。
**检查 filterDeptList 方法中过滤部门列表的逻辑是否正确。**在 filterDeptList 方法中，根据 parentId 过滤部门列表，确保过滤逻辑正确。可以在方法中添加调试语句，打印出过滤后的部门列表，以确保它们的值正确。
**检查 el-tree-select 组件的配置是否正确。**确保 el-tree-select 组件的配置正确，包括 data、node-key、props 等参数的值正确。

通过逐步检查以上几个方面，可以找到问题所在并进行修复。

一些额外的建议:

使用浏览器开发者工具的控制台进行调试，打印关键变量的值，帮助你理解代码的执行过程。
仔细阅读 el-tree-select 组件的官方文档，确保你正确理解了组件的用法和配置参数。
在代码中添加适当的注释，解释代码的功能和逻辑，方便你和其他开发者理解代码。

希望本文档可以帮助你解决 el-tree-select 组件使用过程中遇到的问题。

Vue.js 中使用 el-tree-select 组件实现部门选择功能的常见问题排查