1. 在el-menu加上router 2. index必须绑定路由的path,参考上面的例子,'/'不能少 3. default-active设为当前路由(this.$route.path),这样在路由变化的时候,对应的menu-item才会高亮。
<el-menu-item index="/POSAccountManage"> <router-link to="/POSAccountManage" tag="span" class="span">门店商户账号</router-link> </el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="1-1"> <template slot="title">商家店铺商品</template> <el-menu-item index="/...
通过绑定:index = index0,点击某个子菜单,对应的菜单才会显示文字颜色改变效果。 所有,出现子菜单相互影响的情况时,注意看是不是忘了设置index属性。最好设置每个子菜单的index不同。 这就是el-submenu 标签中index属性的作用。
<el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el...
default-openeds=el-menu> export default{ data(){ return { num:'3-4-1', items:['1','3'] } } }script> 1. 上述代码表示打开 index 为 1 和 3 的父菜单,默认选中 index 为 3-4-1 的叶子结点。 el-submenu : 可展开的菜单,常用属性如下。 index:菜单...
menu-itemindex="3-1">服务一</el-menu-item><el-menu-itemindex="3-2">服务二</el-menu-item></el-submenu><el-menu-itemindex="4">联系我们</el-menu-item></el-menu></template>exportdefault{methods:{handleSelect(index){console.log('选中了菜单项:',index);}}} 1. 2. 3. 4. 5. ...
<el-button>取消</el-button> </el-form-item> </el-form> </template> <!-- js脚本 --> export default { data() { return { } }, methods: { login() { //预留与后端进行一次交互 this.$router.push("/main"); //前端进行路由跳转(网页跳转) } }, mounted() { } } <!
在上面的示例中,我们使用el-menu和el-submenu组件来创建菜单,然后使用el-menu-item组件来创建子菜单项。在每个子菜单项上,我们监听了@click事件,并通过调用navigateTo方法来导航到目标路由,并传递了路由参数。在方法中,我们使用this.$router.push来导航到目标路由,并在params属性中传递路由参数。 请注意,上述示例假定...
.menuLeft .el-submenu__title:hover { background: #6db6ff !important;} 但它只是hover事件，并不会使背景⾊悬停，⼀直存在。后来⼜设置了：.menuLeft .el-menu-item.is-active { background: #6db6ff !important;} .menuLeft .el-submenu__title.is-active { background: #6db6ff !important;}...
选项3</el-menu-item></el-submenu><el-submenuindex="2"><templateslot="title">导航二</template><el-menu-item>选项1</el-menu-item><el-menu-item>选项2</el-menu-item><el-menu-item>选项3</el-menu-item></el-submenu></el-menu> AI代码助手复制代码 Table 表格 用于展示多条结构类似的数...