Vue.js 2.0之select級聯下拉框

    在網上搜索了Vuejs2.0 動態級聯select許久未果，決定本身總結一下本身的經驗，有關select在Vue.js 2.0版本中的應用。首先我先說一下的我使用的技術，我參考了網上成熟的經驗，選擇以Vue.js 2.0+Vue-router+Vuex的全家桶。

    select首先要區分單選和多選，v-model在select單選和多選上有區別。

    select單選實例：

<select v-model="fruit">
	<option selected value="apple">蘋果</option>
	<option value="banana">香蕉</option>
	<option value="watermelon">西瓜</option>
</select>
<span>Selected：{{ fruit }}</span>

    當被選中的option有value屬性時，vm.selected 爲對應option的value值；不然爲對應options的text值。

    select多選實例：

<select v-model="fruit" multiple>
	<option selected value="apple">蘋果</option>
	<option value="banana">香蕉</option>
	<option value="watermelon">西瓜</option>
</select>
<span>Selected：{{ fruit | json }}</span>

對於多選的select，被選中的值會被放入一個數組中。固然在咱們實際開發中絕大部分都是動態select的狀況，因此接下來將分析動態select的實例。

動態select

咱們能夠經過v-for、v-bind指令動態生成option，實例以下：

<template>
 <div id="app">
	<select v-model="fruit" >
		<option v-for="option in options" v-bind:value="option.value">
		      {{option.text}}
		</option>
	</select>
	<span>Selected：{{ fruit | json }}</span>
 </div>
</template>  

<script>
    
    new Vue({
        el: '#app',
        data: {
            fruit: 'apple',
            options: [
                { text: '蘋果', value: 'apple' },
                { text: '香蕉', value: 'banana' },
                { text: '西瓜', value: 'watermelon' }

            ]
        }
    });
    
</script>

   生成的代碼結構以下：

<select>
	<option value="apple">蘋果</option>
	<option value="banana">香蕉</option>
	<option value="watermelon">西瓜</option>
</select>

到這兒基礎知識總結完了，開始來乾貨了。我在寫級聯select的時候遇到2個問題，一個問題是如何解決第一個select選中以後查詢關聯select的數據；一個問題就是我修改數據的時候如何默認選中級聯的select數據，顯示在頁面。這2個問題主要仍是第二個問題困擾我一點。

第一個問題的解決方案是對選中第一個select中的數據作監聽，數據又變化就發起獲取第二個關聯select的請求。實例以下所示：

<template>
	<div class="box-select-first">
		<select v-model.lazy="resCity">
			<option v-for="sc in scLists" v-bind:value="sc.areacode">{{sc.cityname}}</option>
		</select>
	</div>
	<div class="box-select-second">
		<select v-model="resArea">
			<option v-for="sa in saLists" v-bind:value="sa.id">{{sa.areaname}}</option>
		</select>
	</div>
	
</template>

<script>

	export default {
		data: function () {
			return {
				resCity: null,
				resArea: null
			}
		},
		created: function() {
			let vm = this;
			vm.getSelectLists();   //獲取城市下拉列表
		},
		watch: {
			resCity: 'getSecondSelectLists'  //獲取城市對應轄區的下拉列表
		},
		methods: {
			getSelectLists: function() {},
			getSecondSelectLists: function(){}
		}
	}
	
</script>

第二個問題的解決方案是：首先我在實例已經建立完成以後被調用，先獲取城市下拉列表成功以後再去獲取編輯詳情的數據，而後延時綁定關聯的轄區列表的值。這是爲了在生命週期內, 監聽城市改變以後, 先加載轄區列表數據，這樣才能綁定顯示轄區的下拉列表。

<template>
	<div class="box-select-first">
		<select v-model.lazy="resCity">
			<option v-for="sc in scLists" v-bind:value="sc.areacode">{{sc.cityname}}</option>
		</select>
	</div>
	<div class="box-select-second">
		<select v-model="resArea">
			<option v-for="sa in saLists" v-bind:value="sa.id">{{sa.areaname}}</option>
		</select>
	</div>
	
</template>

<script>

	export default {
		data: function () {
			return {
				resCity: null,
				resArea: null
			}
		},
		created: function() {
			let vm = this;
			vm.getSelectLists();   				//實例已經建立完成以後獲取城市下拉列表
		},
		watch: {
			resCity: 'getSecondSelectLists'     //監聽城市值變化，獲取城市對應轄區的下拉列表
		},
		methods: {
			getSelectLists: function() {
				let vm = this;
				if(vm.$route.name == 'modif') {  //判斷編輯頁面獲取編輯詳情數據
					vm.getDetails(vm.$route.params.id);  
				}
			},
			getSecondSelectLists: function(){},
			getDetails:function(){
				setTimeout(function() {
						vm.resArea = data.id;   //延時綁定轄區的下拉選項，爲了轄區下拉數據先加載
					}, 300);
			}
		}
	}
	
</script>

總結：

     在Vue.js 2.0的生命週期中，select的級聯下拉數據綁定，須要先加載好數據，而後才能綁定值。否則沒法成功綁定級聯下拉的值。

 

參考資料：

vue.js官網

 

版權申明： 本文爲原創文章， 轉載時請註明：來自w-rain的我的博客