【Vue】若依框架树形选择器和显示

在使用若依框架过程中经常会用到类似部门这样的树形结构，而若依自带的用户表格在前端显示部门名字是通过后端的返回相应字段来实现，这样需要我们去修改后端，比较麻烦，下面我会介绍一种前端的回显方法

首先，部门树形选择器在若依的用户管理模块中已有现成实现，可直接参考使用。具体代码如下：

<el-col :span="12">
    <el-form-item label="归属部门" prop="department">
        <treeselect v-model="form.department" :options="enabledDeptOptions" :show-count="true" placeholder="请选择归属部门" />
    </el-form-item>
</el-col>

<script>
import { deptTreeSelect } from "@/api/system/user"
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"

export default {
    components: { Treeselect },
    data() {
        return {
          // 所有部门树选项
          deptOptions: undefined,
          // 过滤掉已禁用部门树选项
          enabledDeptOptions: undefined,
    },
    watch: {
        // 根据名称筛选部门树
        deptName(val) {
          this.$refs.tree.filter(val)
        }
    },
    created() {
        this.getDeptTree()
    },
    methods: {
        /** 查询部门下拉树结构 */
        getDeptTree() {
          deptTreeSelect().then(response => {
            this.deptOptions = response.data
            this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
          })
        },
        // 过滤禁用的部门
        filterDisabledDept(deptList) {
          return deptList.filter(dept => {
            if (dept.disabled) {
              return false
            }
            if (dept.children && dept.children.length) {
              dept.children = this.filterDisabledDept(dept.children)
            }
            return true
          })
        },
    }
}
</script>

以上我只总结了需要添加的代码。由于若依已内置部门树查询接口，只需在相应位置复制上述代码即可实现部门树选择功能。

这里就可以实现树形选择部门，现在前端显示的是数据库中的部门ID，我的思路是用递归在我们已经有的部门树数据中查找相同id的值，并返回名称；具体代码如下：

<el-table-column label="部门" align="center" prop="deptName" />
<script>
export default {
    data() {
        return {
          // 部门名称
          deptName: undefined,
    },
    methods: {
        /** 查询人事档案列表 */
        getList() {
          this.loading = true
          listArchive(this.queryParams).then(response => {
            // 处理部门名称显示
            this.archiveList = response.rows.map(item => {
              // 根据 department（部门ID）查找部门名称
              const deptName = this.getDeptNameById(item.department)
              return {
                ...item,
                deptName: deptName // 添加部门名称字段
              }
            })
            this.total = response.total
            this.loading = false
          })
        },
        // 根据部门ID获取部门名称
        getDeptNameById(deptId) {
          deptId = Number(deptId)
  
          if (!deptId || !this.enabledDeptOptions || this.enabledDeptOptions.length === 0) {
            return '-'
          }

          // 递归查找部门名称
          const findDeptName = (depts, id) => {
            for (const dept of depts) {
              // 如果找到匹配的部门，返回名称
              if (dept.id === id) {
                return dept.label
              }
      
              // 递归查找子部门
              if (dept.children && dept.children.length > 0) {
                const result = findDeptName(dept.children, id)
                if (result) {
                  return result // 如果子部门找到了，直接返回结果
                }
              }
            }    
            return null // 没找到返回null
          }

          const result = findDeptName(this.enabledDeptOptions, deptId)
          return result || '-' // 返回结果或默认值
        },
    }
</script>

通过上述方法，即可在表格中正确显示部门名称。

若需进一步展示部门层级路径，可对递归方法进行调整，实现如下：

// 根据部门ID获取部门名称
    getDeptNameById(deptId) {
      deptId = Number(deptId)

      if (!deptId || !this.enabledDeptOptions || this.enabledDeptOptions.length === 0) {
        return '-'
      }

      // 递归查找部门路径
      const findDeptPath = (depts, id, path = []) => {
        for (const dept of depts) {
          const currentPath = [...path, dept]

          if (dept.id === id) {
            return currentPath
          }

          if (dept.children && dept.children.length > 0) {
            const result = findDeptPath(dept.children, id, currentPath)
            if (result) return result
          }
        }
        return null
      }

      const deptPath = findDeptPath(this.enabledDeptOptions, deptId)
      return deptPath ? deptPath.map(dept => dept.label).join(' > ') : '-'
    },