Vue.js 2.0之select级联下拉框

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

在网上搜索了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的个人博客

来源：oschina

链接：https://my.oschina.net/u/1040513/blog/847813

标签

Vue.js

rain