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通过什么获取dom(vue异步更新dom的实现浅析)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- vue页面关闭前的执行(Vue 页面监听用户预览时间功能的实现代码)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue设置div大小(Vue实现div滚轮放大缩小)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- vue将弹框抽离成组件(vue3 可拖动的左右面板分割组件实现)
- django框架教程第100讲(详解Django+Vue+Docker搭建接口测试平台实战)
- vue中的定时函数(vue计时器的实现方法)
- 银泰集团董事长沈国军获评 北京影响力 十大企业家(银泰集团董事长沈国军获评)
- 15帅气男士发型,清爽时尚很有型,喜欢就试试(清爽时尚很有型)
- 哪几个历史人物被影协主席李雪健演的活灵活现(哪几个历史人物被影协主席李雪健演的活灵活现)
- 王伦狭隘,晁盖霸道,宋江奸诈骨头软,只有鲁智深才适合当寨主(王伦狭隘晁盖霸道)
- 他是梁山最早的头目,江湖人称 旱地忽律 ,宋江几乎将其遗忘(他是梁山最早的头目)
- 梁山创始人杜迁,为何不受宋江待见,只排名83位(梁山创始人杜迁)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9