elementui 左侧菜单栏
时间: 2023-10-04 11:11:15 浏览: 119
可以使用 Element UI 中的 Menu 组件来实现左侧菜单栏。下面是一个简单的示例代码:
```vue
<template>
<div class="sidebar">
<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleMenuSelect">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">菜单1</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-setting"></i>
<span slot="title">菜单2</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-star-on"></i>
<span slot="title">菜单3</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: "1"
};
},
methods: {
handleMenuSelect(index) {
this.activeIndex = index;
// 处理菜单点击事件
}
}
};
</script>
<style scoped>
.sidebar {
width: 200px;
}
</style>
```
在这个示例中,我们使用了 Element UI 的 Menu 组件创建了一个垂直的菜单栏。你可以根据需要添加更多的菜单项,并在 `handleMenuSelect` 方法中处理菜单的点击事件。通过修改 `activeIndex` 的值来设置默认选中的菜单项。
记得先安装 Element UI,并在需要使用菜单的页面引入相应的组件。同时还需要在 Vue 的入口文件中导入 Element UI 的样式文件。
阅读全文