快捷導(dǎo)航

vue+iview的菜單與頁(yè)簽的聯(lián)動(dòng)方式

更新時(shí)間：2021年07月08日 12:12:08 作者：Elsa_Panda

這篇文章主要介紹了vue+iview的菜單與頁(yè)簽的聯(lián)動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue+iview菜單與頁(yè)簽聯(lián)動(dòng)

最近在使用vue+iview開(kāi)發(fā)一個(gè)后臺(tái)管理類(lèi)的系統(tǒng)，希望做一個(gè)點(diǎn)擊左側(cè)菜單右側(cè)的頁(yè)簽與內(nèi)容都能相對(duì)應(yīng)的改變。

但搞了好久的路由也沒(méi)有實(shí)現(xiàn)這個(gè)功能。

剛開(kāi)始使用vue+iview不知道iview-admin可以直接拿來(lái)使用，布局之類(lèi)的開(kāi)箱即用，可是自己的demo已經(jīng)寫(xiě)了好久不忍心放棄。

一、使用iview的menu和tab做布局，將這兩個(gè)組件放到主頁(yè)面

由于menu與tab的數(shù)據(jù)相同且樣式需要進(jìn)行關(guān)聯(lián)，因此可以使用vuex進(jìn)行狀態(tài)管理，state中寫(xiě)入需要管理的數(shù)據(jù)和狀態(tài)變量，在mutations中設(shè)置操作的動(dòng)作，actions中監(jiān)聽(tīng)一些行為（我的菜單沒(méi)有展開(kāi)收縮部分，因此并沒(méi)有使用到actions）

二、做好布局之后要對(duì)菜單增加點(diǎn)擊事件

on-select，首先在mutations中注冊(cè)tab的改變事件，當(dāng)左側(cè)菜單點(diǎn)擊的時(shí)候查看tab中是否已經(jīng)有這個(gè)頁(yè)簽并設(shè)置isExist=false，如果存在，isExist修改為true，沒(méi)有的話給tab對(duì)應(yīng)遍歷的數(shù)組增加菜單相對(duì)索引的數(shù)據(jù)。

mutationsType中

mutations中：

menu組件中的事件為：

在tab組件中首先設(shè)置頁(yè)面默認(rèn)路由：

再將事件加入進(jìn)去：

iview+Vue多級(jí)菜單的聯(lián)動(dòng)

用最笨的方式寫(xiě)了一個(gè)三級(jí)菜單的聯(lián)動(dòng)

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: