vue+iview的菜单与页签的联动方式
短信预约 -IT技能 免费直播动态提醒
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>
<div>
<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></div>
</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>以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
