element-ui侧边栏点击事件
时间: 2024-04-03 09:28:50 浏览: 92
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
在Element-UI中,侧边栏的点击事件可以通过使用路由来实现。当侧边栏的某个菜单项被点击时,可以通过路由跳转到相应的页面或执行相应的操作。
首先,你需要在侧边栏组件中定义菜单项,并为每个菜单项添加点击事件。例如:
```html
<template>
<div>
<el-menu>
<el-menu-item @click="handleClick('home')">首页</el-menu-item>
<el-menu-item @click="handleClick('about')">关于</el-menu-item>
<el-menu-item @click="handleClick('contact')">联系我们</el-menu-item>
</el-menu>
</div>
</template>
```
然后,在组件的methods中定义点击事件的处理函数。这个处理函数可以根据点击的菜单项的标识来执行相应的操作,比如跳转到对应的路由页面。
```javascript
<script>
export default {
methods: {
handleClick(menuItem) {
if (menuItem === 'home') {
// 执行跳转到首页的操作
this.$router.push('/home');
} else if (menuItem === 'about') {
// 执行跳转到关于页面的操作
this.$router.push('/about');
} else if (menuItem === 'contact') {
// 执行跳转到联系我们页面的操作
this.$router.push('/contact');
}
}
}
}
</script>
```
这样,当侧边栏的菜单项被点击时,会触发相应的点击事件处理函数,根据菜单项的标识来执行相应的操作。
阅读全文