网站建设服务商_凡科商城官网_线上商城_商标免费设计在线生成_微商城
当前位置:建站首页 > 新闻资讯 > 媒体报道 >

营销型微信小程序_Vue.js 2.0中select级联下拉框实例

发表日期:2021-01-12 13:24文章编辑:jianzhan浏览次数: 标签:    

Vue.js 2.0中select级联下拉框实例     -rain   在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.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 
 select v-model.lazy="resCity" 
 option v-for="sc in scLists" v-bind:value="sc.areacode" {{sc.cityname}} /option 
 /select 
 /div 
 div 
 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 
 select v-model.lazy="resCity" 
 option v-for="sc in scLists" v-bind:value="sc.areacode" {{sc.cityname}} /option 
 /select 
 /div 
 div 
 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 2.0中select级联下拉框实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


相关新闻