vue 동적 다단 계 연동 선택 실현

본 고 는 vue 가 원생 select 라벨 을 바탕 으로 하 는 동적 다단 계 연동 선택 을 말한다.
element - ui 기반 Select 선택 기 구현
본문 demo 주소:http://jsrun.net/yxXKp
코드 는 다음 과 같 습 니 다:
Html

  
    {{item.label}}
  
  
   : {{ selectArr }}

Js

var vm = new Vue({
  el: '#app',
  data: {
    position: null,
    selectArr: [' 1 -  1'],
    selectList: [[{
      value: ' 1 -  1',
      label: ' 1 -  1'
    },
    {
      value: ' 1 -  2',
      label: ' 1 -  2'
    },
    {
      value: ' 1 -  3',
      label: ' 1 -  3'
    },
    {
      value: ' 1 -  4',
      label: ' 1 -  4'
    },
    {
      value: ' 1 -  5',
      label: ' 1 -  5'
    }]]
  },
  methods: {
    //         （                       ）
    addSelectList(index) {
      return [{
        value: ' ' + (index + 2) + ' -  1',
        label: ' ' + (index + 2) + ' -  1'
      },
      {
        value: ' ' + (index + 2) + ' -  2',
        label: ' ' + (index + 2) + ' -  2'
      },
      {
        value: ' ' + (index + 2) + ' -  3',
        label: ' ' + (index + 2) + ' -  3'
      },
      {
        value: ' ' + (index + 2) + ' -  4',
        label: ' ' + (index + 2) + ' -  4'
      },
      {
        value: ' ' + (index + 2) + ' -  5',
        label: ' ' + (index + 2) + ' -  5'
      }]
    },
    selected(e) {
      var current = e.target.value;//     (                   )
      var nextSelect = this.addSelectList(this.position); //         
      this.selectList.splice(this.position + 1, this.selectList.length, nextSelect);
      this.selectArr.splice(this.position + 1, this.selectArr.length);
    },
  }
})