溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在網上搜索了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官網
以上所述是小編給大家介紹的Vue.js 2.0中select級聯下拉框實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
