vue左右联动列表(vue+iview的菜单与页签的联动方式)
类别:编程学习 浏览量:2861
时间:2021-10-12 00:14:20 vue左右联动列表
vue+iview的菜单与页签的联动方式vue+iview菜单与页签联动最近在使用vue+iview开发一个后台管理类的系统,希望做一个点击左侧菜单右侧的页签与内容都能相对应的改变。
但搞了好久的路由也没有实现这个功能。
刚开始使用vue+iview不知道iview-admin可以直接拿来使用,布局之类的开箱即用,可是自己的demo已经写了好久不忍心放弃。
一、使用iview的menu和tab做布局,将这两个组件放到主页面
由于menu与tab的数据相同且样式需要进行关联,因此可以使用vuex进行状态管理,state中写入需要管理的数据和状态变量,在mutations中设置操作的动作,actions中监听一些行为(我的菜单没有展开收缩部分,因此并没有使用到actions)
二、做好布局之后要对菜单增加点击事件
on-select,首先在mutations中注册tab的改变事件,当左侧菜单点击的时候查看tab中是否已经有这个页签并设置isExist=false,如果存在,isExist修改为true,没有的话给tab对应遍历的数组增加菜单相对索引的数据。
mutationsType中
mutations中:
menu组件中的事件为:
在tab组件中首先设置页面默认路由:
再将事件加入进去:
iview+Vue多级菜单的联动用最笨的方式写了一个三级菜单的联动
<template> <li> <Select v-model="whereMap.model1" style="width:200px" @on-change="getSecond"> <Option v-for="item in list1" :value="item.id" :key="item.id">{{ item.label }}</Option> </Select> <Select v-model="whereMap.model2" style="width:200px" @on-change="getThird"> <Option v-for="item in list2" :value="item.id" :key="item.id">{{ item.label }}</Option> </Select> <Select v-model="whereMap.model3" style="width:200px"> <Option v-for="item in list3" :value="item.id" :key="item.id">{{ item.label }}</Option> </Select> <Button class="search-btn" type="default" @click="searchClear">清空</Button></li> </template> <script> export default { data () { return { datatest: { l1: [ { id: 'cat', label: '猫' }, { id: 'dog', label: '狗' } ], l2: { cat: [{ id: 'sc', label: '小猫' }, { id: 'bc', label: '大猫' }], dog: [{ id: 'sd', label: '小狗' }, { id: 'bd', label: '大狗' }] }, l3: { sc: [{ id: 'sc1', label: '小花猫' }, { id: 'sc2', label: '小橘猫' }], bc: [{ id: 'bc1', label: '大花猫' }, { id: 'bc2', label: '大橘猫' }] } }, list1: [], list2: [], list3: [], whereMap: { model1: '', model2: '', model3: '' } } }, mounted () { this.init() }, created () { this.init() }, methods: { init () { this.list1 = this.datatest.l1 }, getSecond (val) { this.list2 = this.datatest.l2[val] }, getThird (val) { this.list3 = this.datatest.l3[val] }, searchClear () { console.log(this.whereMap) this.whereMap = {}; this.list2 = []; this.list3 = []; } } } </script>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持开心学习网。
您可能感兴趣
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue3组件通讯消息(Vue3实现Message消息组件示例)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- 详解从vue的组件传值着手观察者模式(详解从vue的组件传值着手观察者模式)
- vue手动清除keepalive缓存(vue中keep-alive组件的用法示例)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vue将弹框抽离成组件(vue3 可拖动的左右面板分割组件实现)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue3.0 自定义组件(Vue 3.0自定义指令的使用入门)
- 文莱旅游攻略(文莱旅游攻略介绍)
- 马来西亚旅游攻略(马来西亚旅游攻略自由行攻略)
- 缅甸旅游攻略(缅甸旅游攻略必去景点推荐)
- 《庆余年2》新消息,原班人马,肖战特别出演,这才是最好的安排(庆余年2新消息原班人马)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
热门推荐
- python技巧图解(Python魔法方法功能与用法简介)
- pythonlambda是什么函数(Python之lambda匿名函数及map和filter的用法)
- nginx宝塔配置修改(宝塔面板默认的404页面不生效怎么办Nginx?)
- Extjs msgTarget 提示位置
- python云服务技术(Python脚本修改阿里云的访问控制列表的方法)
- 阿里云服务器公网ip搭建(阿里云服务器无公网如何上网?)
- 怎样在python中散点图(python使用Plotly绘图工具绘制散点图、线形图)
- docker默认网桥设置(Docker默认网段修改实现方法解析)
- jquery实现页面滚动时自动加载内容
- python协程解释(在python里从协程返回一个值的示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9