Vue.js 2.0中select级联下拉框实例

时间:2020-05-15 w-rain 人气:0

在网上搜索了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级联下拉框实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

加载全部内容