Element UI垂直导航栏变成按钮样式 点击效果不改变

有时候页面点击按钮效果会失效，这样用户体验不太好，所以我看了一下官网，发现导航栏点击事件不失效，这样的话，用户在同页面点击其他的按钮，样式也不会更改。

效果图

代码

<template><div id="app"><el-row class="tac"><el-col :span="4"><el-menudefault-active="选中"class="el-menu-vertical-demo"><el-menu-item v-for="(item,index) in data" :key="index" @click="clkStudent(item)" :index="item"><template slot="title"><span>{{item}}</span></template></el-menu-item></el-menu></el-col></el-row></div></template><script></script><script>export default {data() {return {data:["选中","单独","完整","搜索","单位"]};},methods: {clkStudent(id) {console.log(id, "id");//获取id},handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},},};</script><style scoped>//样式.el-menu-item {border: 1px solid wheat;border-radius: 26px;}.el-menu {border-right:0!important;}</style>

如果觉得《Element UI垂直导航栏变成按钮样式 点击效果不改变》对你有帮助，请点赞、收藏，并留下你的观点哦！