Vue.js 组件中过滤树形数据：实现上级部门选择器

在 Vue.js 组件中过滤树形数据：实现上级部门选择器

本文将介绍如何在 Vue.js 组件中过滤树形数据，并将其应用于上级部门选择器，以实现用户友好的交互体验。

场景：

假设我们需要在一个表单中添加一个上级部门选择器，用户可以选择其部门的上级部门。为了提供更好的用户体验，我们需要过滤掉当前部门及其子部门，只显示其可选择的上级部门。

实现步骤：

1. 定义过滤方法:

   首先，我们需要定义一个过滤方法来处理树形数据的过滤。该方法接受两个参数：deptId（当前部门的 ID）和 deptList（所有部门的树形数据）。

   filterDeptList(deptId, deptList) {
     const filteredList = [];
     const traverse = (list) => {
       list.forEach((item) => {
         if (item.deptId !== deptId) {
           const newItem = { ...item };
           if (newItem.children) {
             newItem.children = traverse(newItem.children);
           }
           filteredList.push(newItem);
         }
       });
     };
     traverse(deptList);
     return filteredList;
   }
   

   该方法使用递归遍历 deptList，如果当前节点的 deptId 不等于 deptId，则将其添加到 filteredList 中。

2. 在组件中使用过滤方法:

   接下来，我们需要在 Vue.js 组件中使用该过滤方法。假设我们有一个名为 formData 的数据对象，其中包含 parentId 属性，用于存储当前部门的上级部门 ID。

   computed: {
     filteredDeptList() {
       return this.filterDeptList(this.formData.parentId, this.deptList);
     },
   },
   

   通过 computed 属性，我们将 filterDeptList 方法应用于 deptList，并将过滤后的结果保存到 filteredDeptList 中。

3. 将过滤后的数据绑定到选择器:

   最后，我们将 filteredDeptList 绑定到 el-tree-select 组件，以实现上级部门选择功能。

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

   通过以上代码，我们成功实现了根据当前部门 ID 过滤上级部门选择器，只显示可选择的部门。

总结：

本文介绍了如何在 Vue.js 组件中过滤树形数据，并将其应用于上级部门选择器。通过使用递归遍历和 computed 属性，我们可以轻松实现数据过滤，并提供更好的用户体验。