vue+iviewのメニューとタブの連携方法

Vue+iview メニューとタブのリンク

現在、vue+iview を使用してバックエンド管理システムを開発しています。クリックしたときに左側のメニューの右側にあるタブとコンテンツに対応する変更を加えたいと思っています。

しかし、長い間ルーティングに取り組んできましたが、まだこの機能を実現できていません。

vue+iview を使い始めた当初は、iview-admin が直接使用できることや、レイアウトなどがすぐに使える状態になっていることを知りませんでした。しかし、私はすでに長い間デモを書いていたので、諦めることができませんでした。

1. iviewのメニューとタブをレイアウトに使用し、これら2つのコンポーネントをメインページに配置します。

メニューとタブのデータは同じで、スタイルを関連付ける必要があるため、状態管理には vuex を使用できます。管理する必要があるデータと状態変数は state に記述し、操作アクションは mutations に設定し、一部の動作は actions で listen します (私のメニューには拡大縮小部分がないため、actions は使用しません)

2.レイアウトが完了したら、メニューにクリックイベントを追加します。

on-select では、まず、mutations にタブ変更イベントを登録します。左のメニューがクリックされたら、タブに既にタブがあるかどうかを確認し、isExist=false を設定します。存在する場合は、isExist が true に変更されます。存在しない場合は、タブがトラバースする配列にメニュー相対インデックスデータを追加します。

変異タイプ

突然変異の場合:

メニューコンポーネント内のイベントは次のとおりです。

まず、タブコンポーネントでページのデフォルトルートを設定します。

次にイベントを追加します。

iview+Vue マルチレベルメニューリンク

3 レベルのメニューリンクを可能な限り愚かな方法で作成しました。

<テンプレート>
  <div>
    <v-model="whereMap.model1" を選択
            スタイル="幅:200px"
            @on-change="getSecond">
      <オプション v-for="リスト1内の項目"
              :value="アイテムID"
              :key="item.id">{{ item.label }}</オプション>
    </選択>
    <v-model="whereMap.model2" を選択
            スタイル="幅:200px"
            @on-change="getThird">
      <オプション v-for="リスト2の項目"
              :value="アイテムID"
              :key="item.id">{{ item.label }}</オプション>
    </選択>
    <v-model="whereMap.model3" を選択
            スタイル="幅:200px">
      <オプション v-for="リスト3内の項目"
              :value="アイテムID"
              :key="item.id">{{ item.label }}</オプション>
    </選択>
    <ボタンクラス="search-btn"
            タイプ="デフォルト"
            @click="searchClear">クリア</Button></div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      データテスト: {
        l1: [
          {
            id: '猫',
            ラベル: '猫'
          },
          {
            id: '犬',
            ラベル: '犬'
          }
        ]、
        l2: {
          猫: [{ id: 'sc', label: '子猫' }, { id: 'bc', label: '大きな猫' }],
          犬: [{ id: 'sd', label: '子犬' }, { id: 'bd', label: '大型犬' }]
        },
        l3: {
          sc: [{ id: 'sc1', label: '小さな猫' }, { id: 'sc2', label: '小さなオレンジ色の猫' }],
          bc: [{ id: 'bc1', label: '大きなトラ猫' }, { id: 'bc2', label: '大きなオレンジ色の猫' }]
        }
      },
      リスト1: [],
      リスト2: [],
      リスト3: [],
      マップ: {
        モデル1: ''、
        モデル2: ''、
        モデル3: ''
      }
    }
  },
  マウント（）{this.init()}、
  作成された（）{
    この.init()
  },
  メソッド: {
    初期化（）{
      this.list1 = this.datatest.l1
    },
    getSecond(val) {
      this.list2 = this.datatest.l2[値]
    },
    getThird (値) {
 
      this.list3 = this.datatest.l3[値]
    },
    検索クリア() {
      コンソールログ(this.whereMap)
      this.whereMap = {};
      this.list2 = [];
      this.list3 = [];
    }
  }
}
</スクリプト>

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: