vue+iview 의 메뉴 와 페이지 서명 의 연결 방식

vue+iview 메뉴 와 페이지 서명 연결
최근 vue+iview 를 사용 하여 백 엔 드 관리 시스템 을 개발 하고 있 습 니 다.왼쪽 메뉴 오른쪽 에 있 는 페이지 서명 과 내용 에 대응 하 는 변 화 를 원 합 니 다.
하지만 오 랜 길 을 걸 었 지만 이 기능 은 이 루어 지지 않 았 다.
처음에 vue+iview 를 사 용 했 을 때 iview-admin 을 직접 가 져 와 서 사용 할 수 있 는 지 몰 랐 습 니 다.레이아웃 같은 상 자 를 열 면 바로 사용 할 수 있 지만 자신의 demo 는 이미 오랫동안 쓰 여 있어 서 포기 할 수 없습니다.
1.iview 의 menu 와 tab 를 사용 하여 레이아웃 을 하고 이 두 구성 요 소 를 홈 페이지 에 놓 습 니 다.
menu 는 tab 의 데이터 와 같 고 스타일 이 연결 되 어야 하기 때문에 vuex 를 사용 하여 상태 관 리 를 할 수 있 습 니 다.state 에 관리 할 데이터 와 상태 변 수 를 기록 하고 mutations 에서 동작 을 설정 합 니 다.actions 에서 일부 행 위 를 감청 할 수 있 습 니 다.(제 메뉴 는 수축 부분 을 펼 치지 않 았 기 때문에 actions 를 사용 하지 않 았 습 니 다)


2.레이아웃 을 완성 한 후 메뉴 에 클릭 이벤트 추가
on-select,우선 mutations 에 tab 의 변경 이 벤트 를 등록 합 니 다.왼쪽 메뉴 를 클릭 할 때 tab 에 이 페이지 의 서명 이 있 는 지 확인 하고 isExist=false 를 설정 합 니 다.존재 하면 isExist 가 true 로 변경 되 고 없 으 면 tab 에 해당 하 는 배열 에 메뉴 의 상대 적 인 색인 데 이 터 를 추가 합 니 다.
mutations Type 중

mutations 중:

menu 구성 요소 의 이벤트:

tab 구성 요소 에서 먼저 페이지 기본 경로 설정:

이벤트 추가:

iview+Vue 다단 계 메뉴 연결
가장 멍청 한 방식 으로 3 급 메뉴 의 연동 을 썼 다.

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

이상 은 개인 적 인 경험 이 므 로 여러분 에 게 참고 가 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.