VUE3实现二级下拉菜单

首先具备所有的开发条件,现在就只实现二级菜单:

第一步,新建子菜单vue页面,并在routes.js中写好路由你想创建的菜单路由:

上图表示我要在一级菜单Spring目录下建立子菜单sp1:

上图就是在el-menu组件中使用el-sub-menu和el-menu-item-group组件来实现二级菜单。

最后简述:刚开始写的时候找了很多网友写的,但是都感觉好麻烦,然后自己又重新尝试写了一下,感觉比较简单易懂。

  • 10
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue二级联动下拉菜单的代码可以分为两个部分:数据部分和视图部分。以下是一个简单的示例代码: ``` <template> <div> <select v-model="selectedFirst" @change="onChangeFirst"> <option value="">请选择一级分类</option> <option v-for="(item, index) in firstList" :key="index" :value="item">{{ item.name }}</option> </select> <select v-model="selectedSecond" @change="onChangeSecond"> <option value="">请选择二级分类</option> <option v-for="(item, index) in secondList" :key="index" :value="item">{{ item.name }}</option> </select> </div> </template> <script> export default { data() { return { firstList: [ { id: 1, name: '分类1' }, { id: 2, name: '分类2' }, { id: 3, name: '分类3' }, ], secondList: [], selectedFirst: '', selectedSecond: '', }; }, methods: { onChangeFirst() { if (this.selectedFirst) { this.secondList = this.selectedFirst.children; this.selectedSecond = ''; } else { this.secondList = []; this.selectedSecond = ''; } }, onChangeSecond() { // do something }, }, }; </script> ``` 在这个示例中,我们定义了两个下拉菜单,一个用于选择一级分类,另一个用于选择二级分类。当用户选择一级分类时,我们会根据这个分类的子分类列表更新二级下拉菜单选项。当用户选择二级分类时,我们会执行相应的逻辑。 以上仅为示例代码,具体实现会因应用场景和需求而有所不同。如果您还有其他问题或需要更详细的说明,请告诉我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值