### 如何在
Vue3 中使用
Element Plus 创建导航栏
为了创建基于
Vue3 的导航栏，需先确保项目已安装 `
ElementPlus` 并配置好 `
Vue Router`[^1]。
#### 安装依赖库
```bash
npm install
element-plus
npm install
vue-router
```
#### 设置路由文件 (router/index
.js)
定义简单的页面路径映射关系来支持导航跳转功能。
```javascript
import { createRouter, createWebHistory } from &#
39;
vue-router&#
39;
const routes = [
{
path: &#
39;/&#
39;,
name: &#
39;Home&#
39;,
component: () => import(&#
39;@/views/Home
.vue&#
39;)
},
{
path: &#
39;/about&#
39;,
name: &#
39;About&#
39;,
component: () => import(&#
39;@/views/About
.vue&#
39;)
}
]
export default createRouter({
history: createWebHistory(),
routes,
})
```
#### 实现顶部导航栏组件 (`components/HeaderNav
.vue`)
此部分展示了如何利用 `el
-menu`, `el
-submenu`, 及 `el
-menu
-item` 组件构建响应式的水平菜单结构，并通过绑定动态类名控制子项高亮效果[^2]。
```html
<template>
<div class="header
-nav">
<el
-menu mode="horizontal" router>
<!
-- 主菜单
-->
<el
-menu
-item index="/">首页</el
-menu
-item>
<el
-submenu v
-for="(submenu, index) in menuList" :key="index" :index="&#
39;sub&#
39; + index">
<template slot="title">{{ submenu
.title }}</template>
<!
-- 子菜单列表
-->
<el
-menu
-item
v
-for="(item,i) in submenu
.children"
:key="i"
:index="item
.path"
:class="currentActiveIndex===`${index}
-${i}` ? &#
39;activeSubmenu&#
39;: &#
39;defaultSubmenu&#
39;"
>
{{ item
.name }}
</el
-menu
-item>
</el
-submenu>
</el
-menu>
</div>
</template>
<script setup lang="ts">
// 假设这里有一个方法用于
获取当前激活的
索引值 currentActiveIndex
let currentActiveIndex = ref(&#
39;0
-0&#
39;)
defineProps<{
menuList: Array<{ title:string; children:Array<{name:string,path:string}> }>
}>()
</script>
<style
scoped>
.activeSubmenu {
background
-color: #ecf5ff;
}
.defaultSubmenu {
/* 默认样式 */
}
</style>
```
上述代码片段实现了带有下拉选项卡形式的多级导航条目展示方式；其中每个顶层链接都关联着特定的目标地址或展开内含更多细化分类项目的折叠面板。当用户点击某个具体位置时，会依据实际交互情况自动更新对应的视觉反馈状态以突出显示所选区域。
在 Vue3 搭配 Element-Plus 的表格组件中，可以通过 `scope.row` 访问数据体的属性，如 `ID` 字段。若数据体内部不存在该字段，则无法获取。同时，可以利用 `scope.$index` 来获取每行的渲染索引。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
