利用Vue3+ElementUI樹形菜單實(shí)現(xiàn)層次化用戶界面

更新時間：2026年04月03日 10:47:38 作者：愛分享的魚魚

ElementUI是一個超棒的UI框架,它基于Vue.js提供了豐富的組件和樣式,可以幫你快速構(gòu)建出美觀實(shí)用的登陸頁面,這篇文章主要介紹了利用Vue3+ElementUI樹形菜單實(shí)現(xiàn)層次化用戶界面的相關(guān)資料,需要的朋友可以參考下

引言

樹形菜單能夠以層次化的方式展示具有父子關(guān)系的數(shù)據(jù)，使用戶能夠直觀地理解復(fù)雜的權(quán)限結(jié)構(gòu)、組織架構(gòu)或內(nèi)容分類。本文將深入探討樹形菜單的設(shè)計原理、實(shí)現(xiàn)方式以及在實(shí)際項目中的應(yīng)用。

什么是樹形菜單

樹形菜單（Tree Menu）是一種可視化地展示層次結(jié)構(gòu)數(shù)據(jù)的UI組件。它通常用于表示具有父子關(guān)系的數(shù)據(jù)集合，如文件系統(tǒng)、組織架構(gòu)、權(quán)限系統(tǒng)等。樹形菜單的主要特點(diǎn)包括：

層次結(jié)構(gòu)：清晰地展示數(shù)據(jù)之間的層級關(guān)系
可折疊性：允許用戶展開或折疊節(jié)點(diǎn)以控制信息密度
可選擇性：支持單選、多選或級聯(lián)選擇
交互性：提供豐富的用戶交互體驗

樹形菜單的核心功能

1. 展開/折疊功能

樹形菜單最基本的功能是允許用戶展開或折疊節(jié)點(diǎn)，這有助于控制信息的顯示密度。用戶可以根據(jù)需要查看詳細(xì)信息或保持界面簡潔。

2. 多選功能

在權(quán)限管理系統(tǒng)中，樹形菜單通常需要支持多選功能，允許用戶選擇多個節(jié)點(diǎn)。特別是當(dāng)需要實(shí)現(xiàn)級聯(lián)選擇時（選擇父節(jié)點(diǎn)時自動選擇所有子節(jié)點(diǎn)），這一功能尤為重要。

3. 搜索和過濾

對于大型樹形結(jié)構(gòu)，搜索和過濾功能可以幫助用戶快速定位特定節(jié)點(diǎn)。

實(shí)現(xiàn)樹形菜單的關(guān)鍵技術(shù)

數(shù)據(jù)結(jié)構(gòu)

樹形菜單的數(shù)據(jù)結(jié)構(gòu)通常采用遞歸結(jié)構(gòu)，每個節(jié)點(diǎn)包含以下屬性：

{
  id: 1,                    // 節(jié)點(diǎn)唯一標(biāo)識
  name: "系統(tǒng)管理",          // 節(jié)點(diǎn)顯示名稱
  parentId: null,           // 父節(jié)點(diǎn)ID
  children: [               // 子節(jié)點(diǎn)數(shù)組
    {
      id: 2,
      name: "用戶管理",
      parentId: 1,
      children: []
    }
  ]
}

轉(zhuǎn)換算法

將扁平化的數(shù)據(jù)轉(zhuǎn)換為樹形結(jié)構(gòu)是實(shí)現(xiàn)樹形菜單的關(guān)鍵步驟。常用的轉(zhuǎn)換算法如下：

const listToTree = (list, parentId = null) => {
  return list
    .filter(item => item.parentId === parentId)
    .map(item => ({
      ...item,
      children: listToTree(list, item.id)
    }))
}

在Vue項目中實(shí)現(xiàn)樹形菜單

以Element Plus UI庫為例，我們可以使用其內(nèi)置的el-tree組件來實(shí)現(xiàn)功能豐富的樹形菜單。

基礎(chǔ)實(shí)現(xiàn)

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    node-key="id"
    :default-expanded-keys="defaultExpandedKeys"
    :default-checked-keys="checkedKeys"
    show-checkbox
  />
</template>

<script setup>
import { ref } from 'vue'

// 樹形數(shù)據(jù)
const treeData = ref([
  {
    id: 1,
    label: '系統(tǒng)管理',
    children: [
      {
        id: 2,
        label: '用戶管理',
        children: [
          { id: 3, label: '用戶查看' },
          { id: 4, label: '用戶編輯' }
        ]
      }
    ]
  }
])

// 樹形組件屬性配置
const treeProps = {
  children: 'children',
  label: 'label'
}

// 默認(rèn)展開的節(jié)點(diǎn)
const defaultExpandedKeys = ref([1])

// 默認(rèn)選中的節(jié)點(diǎn)
const checkedKeys = ref([3])
</script>

高級功能實(shí)現(xiàn)

1. 級聯(lián)選擇控制

在某些場景下，我們可能需要控制是否啟用級聯(lián)選擇：

<el-tree
  :data="treeData"
  node-key="id"
  show-checkbox
  :check-strictly="true"  <!-- 禁用級聯(lián)選擇 -->
/>

2. 自定義節(jié)點(diǎn)內(nèi)容

通過作用域插槽可以自定義節(jié)點(diǎn)的顯示內(nèi)容：

<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
  <template #default="{ node, data }">
    <span class="custom-tree-node">
      <span>{{ node.label }}</span>
      <span>
        <el-button type="text" size="small">編輯</el-button>
        <el-button type="text" size="small">刪除</el-button>
      </span>
    </span>
  </template>
</el-tree>

樹形菜單在權(quán)限管理中的應(yīng)用

權(quán)限管理是樹形菜單最常見的應(yīng)用場景之一。在角色權(quán)限分配中，樹形菜單能夠清晰地展示菜單權(quán)限的層級關(guān)系，使管理員能夠直觀地分配權(quán)限。

實(shí)際應(yīng)用案例：PMS系統(tǒng)中的角色權(quán)限管理

我的項目中，實(shí)現(xiàn)了基于樹形菜單的角色權(quán)限管理功能。具體實(shí)現(xiàn)包括：

權(quán)限數(shù)據(jù)加載：從menusApiService.js獲取所有可用的菜單權(quán)限
樹形結(jié)構(gòu)構(gòu)建：使用listToTree工具函數(shù)將扁平化的菜單數(shù)據(jù)轉(zhuǎn)換為樹形結(jié)構(gòu)
權(quán)限選擇與保存：通過樹形組件的多選功能實(shí)現(xiàn)權(quán)限的批量分配

權(quán)限分配流程

加載權(quán)限數(shù)據(jù)：從后端獲取所有可用的權(quán)限節(jié)點(diǎn)
構(gòu)建樹形結(jié)構(gòu)：將權(quán)限數(shù)據(jù)轉(zhuǎn)換為樹形結(jié)構(gòu)
顯示當(dāng)前權(quán)限：在樹形菜單中高亮顯示已分配的權(quán)限
選擇權(quán)限：用戶通過勾選節(jié)點(diǎn)來分配權(quán)限
提交變更：將選擇的權(quán)限保存到后端

實(shí)際代碼實(shí)現(xiàn)

在RolesView.vue中，我們實(shí)現(xiàn)了完整的權(quán)限管理功能：

<template>
  <el-form-item label="權(quán)限列表" prop="permissions" style="max-height: 180px">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
      <div>
        <el-button size="small" @click="selectAllPermissions" type="primary">全選</el-button>
        <el-button size="small" @click="unselectAllPermissions" type="info" style="margin-left: 10px;">全不選</el-button>
        <el-button size="small" @click="invertSelectPermissions" type="warning">反選</el-button>
      </div>
    </div>
    <el-tree 
      ref="permissionTreeRef"
      :data="permissionTreeData" 
      node-key="id" 
      show-checkbox 
      :default-expanded-keys="defaultExpandedKeys"
      :props="treeProps" 
      style="border: 1px solid #dcdfe6; padding: 10px; border-radius: 4px; max-height: 400px; overflow-y: auto;">
    </el-tree>
  </el-form-item>
</template>

權(quán)限操作功能

全選功能實(shí)現(xiàn)

const selectAllPermissions = () => {
  if (permissionTreeRef.value) {
    // 獲取所有葉子節(jié)點(diǎn)的ID
    const allLeafIds = [];
    const collectLeafIds = (nodes) => {
      nodes.forEach(node => {
        if (node.children && node.children.length > 0) {
          collectLeafIds(node.children);
        } else {
          allLeafIds.push(node.id);
        }
      });
    };
    collectLeafIds(permissionTreeData.value);
    
    // 全選所有葉子節(jié)點(diǎn)
    permissionTreeRef.value.setCheckedKeys(allLeafIds);
  }
};

全不選功能實(shí)現(xiàn)

const unselectAllPermissions = () => {
  if (permissionTreeRef.value) {
    permissionTreeRef.value.setCheckedKeys([]);
  }
};

反選功能實(shí)現(xiàn)

const invertSelectPermissions = () => {
  if (permissionTreeRef.value) {
    const checkedKeys = permissionTreeRef.value.getCheckedKeys();
    const allLeafIds = [];
    const collectLeafIds = (nodes) => {
      nodes.forEach(node => {
        if (node.children && node.children.length > 0) {
          collectLeafIds(node.children);
        } else {
          allLeafIds.push(node.id);
        }
      });
    };
    collectLeafIds(permissionTreeData.value);
    
    // 計算未選中的葉子節(jié)點(diǎn)
    const uncheckedLeafIds = allLeafIds.filter(id => !checkedKeys.includes(id));
    
    // 設(shè)置樹的選中狀態(tài)為反選
    permissionTreeRef.value.setCheckedKeys(uncheckedLeafIds);
  }
};

實(shí)際應(yīng)用場景分析

組織架構(gòu)管理

在企業(yè)管理系統(tǒng)中，組織架構(gòu)通常呈現(xiàn)樹形結(jié)構(gòu)。樹形菜單可以清晰地展示公司、部門、團(tuán)隊之間的層級關(guān)系，便于管理員進(jìn)行組織結(jié)構(gòu)的調(diào)整和人員分配。

文件目錄管理

文件管理系統(tǒng)中的目錄結(jié)構(gòu)天然具有樹形特征。用戶可以通過樹形菜單直觀地瀏覽和管理文件夾結(jié)構(gòu)，進(jìn)行文件的移動、復(fù)制等操作。

產(chǎn)品分類管理

在電商系統(tǒng)中，產(chǎn)品分類通常采用多級分類結(jié)構(gòu)。樹形菜單可以幫助管理員更好地組織和管理商品分類，提高商品管理效率。

性能優(yōu)化考慮

大數(shù)據(jù)量處理

當(dāng)樹形菜單包含大量節(jié)點(diǎn)時，需要考慮性能優(yōu)化：

虛擬滾動：只渲染可視區(qū)域內(nèi)的節(jié)點(diǎn)
懶加載：按需加載子節(jié)點(diǎn)數(shù)據(jù)
數(shù)據(jù)分頁：對樹形數(shù)據(jù)進(jìn)行分頁處理

內(nèi)存管理

在長時間運(yùn)行的應(yīng)用中，需要關(guān)注內(nèi)存使用情況：

及時清理不需要的事件監(jiān)聽器
避免循環(huán)引用導(dǎo)致的內(nèi)存泄漏
合理使用組件的生命周期鉤子

渲染優(yōu)化

對于大型樹形結(jié)構(gòu)，可以考慮以下優(yōu)化策略：

使用虛擬滾動技術(shù)減少DOM節(jié)點(diǎn)數(shù)量
實(shí)現(xiàn)節(jié)點(diǎn)的懶加載，只在用戶展開時加載子節(jié)點(diǎn)
使用防抖技術(shù)優(yōu)化搜索和過濾功能

總結(jié)

樹形菜單作為展示層次化數(shù)據(jù)的重要組件，在現(xiàn)代Web應(yīng)用中發(fā)揮著關(guān)鍵作用。通過合理的設(shè)計和實(shí)現(xiàn)，樹形菜單不僅能夠有效地組織復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，還能提供良好的用戶體驗。

在實(shí)際項目開發(fā)中，我們需要根據(jù)具體需求選擇合適的實(shí)現(xiàn)方式，考慮性能、可訪問性和用戶體驗等多個方面。隨著前端技術(shù)的不斷發(fā)展，樹形菜單的實(shí)現(xiàn)方式也在不斷演進(jìn)，但其核心目標(biāo)始終是幫助用戶更好地理解和操作層次化數(shù)據(jù)。

通過本文的介紹，希望能夠幫助開發(fā)者更好地理解和應(yīng)用樹形菜單組件，在實(shí)際項目中構(gòu)建出功能強(qiáng)大且用戶友好的層次化界面。樹形菜單不僅是技術(shù)實(shí)現(xiàn)，更是用戶體驗設(shè)計的重要組成部分，需要在功能性和易用性之間找到平衡點(diǎn)。

您可能感興趣的文章: