elementui 侧边栏
时间: 2023-10-04 14:14:48 浏览: 344
element-ui 实现响应式导航栏的示例代码
elementui 侧边栏的实现可以借助它自带的el-menu组件。首先,我们需要在html文件中引入elementui的css和js文件。然后,在Vue的template中,使用el-menu组件来创建菜单栏,设置菜单项和点击事件。具体代码如下:
```html
<template>
<div>
<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
<el-menu-item index="1">菜单项1</el-menu-item>
<el-menu-item index="2">菜单项2</el-menu-item>
<el-menu-item index="3">菜单项3</el-menu-item>
</el-menu>
</div>
</template>
```
在Vue的script中,需要设置data属性来保存当前选中的菜单项的index,以及定义handleSelect方法来处理菜单项的点击事件。具体代码如下:
```javascript
<script>
export default {
data() {
return {
activeIndex: '1'
}
},
methods: {
handleSelect(index) {
this.activeIndex = index;
// 处理菜单项点击事件的逻辑
}
}
}
</script>
```
这样就可以实现一个简单的elementui侧边栏了。你可以根据实际需求,自定义菜单项和点击事件的逻辑。
阅读全文