vue实现动态多级联动选择

demo地址：http://jsrun.net/LdqKp

Html

<div id="app">
  <select v-for="(obj,key) in selectedArr" v-model="obj.selected" @change="select" :key="key">
    <option v-for="item in obj.optionArr" :value="item.value" :key="item.value">{{item.text}}</option>
  </select>
  <p>selectedArr: {{ selectedArr }}</p>
</div>

Js

var vm = new Vue({
  el: '#app',
  data: {
    selectedArr: [{
      selected:'a0',
      optionArr:[
        { text: '01', value: 'a0' },
      	{ text: '02', value: 'b0' },
      	{ text: '03', value: 'c0' }]
    }]
  },
  methods: {
    //获取当前选中层级
    getCurrentIndex:function(value){
      for(var i=0;i<this.selectedArr.length;i++){
        for(var j=0;j<this.selectedArr[i].optionArr.length;j++){
        	if(this.selectedArr[i].optionArr[j].value === value){
            return i
          }
      	}
			}
    },
    //模拟添加下一级
    addSelected:function(index){
      this.selectedArr.push({
      	selected:'a'+index,
      	optionArr:[
        	{ text: index+'1', value: 'a'+index },
      		{ text: index+'2', value: 'b'+index },
      		{ text: index+'3', value: 'c'+index }]
    	})
    },
    //去除当前选中层级之后的级数
    removeSelected:function(index){
      if( index < this.selectedArr.length ){
        this.selectedArr.splice(index,this.selectedArr.length)
      }
    },
	  select:function(e){
      var current = e.target.value;//获取选中值
      var currentIndex = this.getCurrentIndex(current)+1;//获取当前层级
      this.removeSelected(currentIndex);
      this.addSelected(currentIndex);
		}
  }
})