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


Posted in Javascript onMarch 06, 2017

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

Javascript 相关文章推荐
基于jquery的页面划词搜索JS
Sep 14 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
js实现上传图片并显示图片名称
Dec 18 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 #Javascript
Bootstrap按钮组简单实现代码
Mar 06 #Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 #Javascript
Javascript中引用类型传递的知识点小结
Mar 06 #Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 #Javascript
js正则表达式验证表单【完整版】
Mar 06 #Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
使用python实现生成用户信息
2017/03/20 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
keras slice layer 层实现方式
2020/06/11 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
JAVA代码查错题
2014/10/10 面试题
应届生自我鉴定
2013/12/11 职场文书
求职信模板怎么做
2014/01/26 职场文书
大学生工作自荐书
2014/06/16 职场文书
小学生读书笔记
2015/07/01 职场文书