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>
  <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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持华域联盟。

您可能感兴趣的文章:

• vue elementUI使用tabs与导航栏联动
• Vue实现左右菜单联动实现代码
• vue+iview框架实现左侧动态菜单功能的示例代码
• 详解element-ui级联菜单（城市三级联动菜单）和回显问题

本文由 华域联盟 原创撰写：华域联盟 » vue+iview的菜单与页签的联动方式

转载请保留出处和原文链接：https://www.cnhackhy.com/74439.htm