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

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

时间: 2017-03-03

vue2.x select2 指令封装详解

本文介绍了vue2.x select2 指令封装,分享给大家,具体如下: 其他的就不说了,说说封装过程的问题吧 1.vue不同版本指令接受参数不一样 2.酱油君对于vue2.x双向绑定的机制不了解(有大神路过望在评论中不吝赐教) 上代码: <!DOCTYPE html> <html> <head> <title>vue select2 封装</title> <link href="https://cdnjs.cloudflare.

vue2组件之select2调用的示例代码

目前,项目中使用了纯前端的静态项目+RESTFul接口的模式.为了更好的对数据进行操作,前端使用了vue2的mvvm功能,但是由于不是单页面应用,所以,并没有涉及到其它的如vue-route等功能,也未使用webpack等编译功能,所以,也没有使用.vue文件功能.这时候,如果用到控件,则多数从原jquery的组件中选择. select下拉搜索选择 这次的需求调研与设计是原来做winform开发的同事,由于用惯了devexpress这个控件库,所以,对于searchlookupeditor这个控

vue2.0使用swiper组件实现轮播的示例代码

1.安装swiper npm install swiper@3.4.1 --save-dev 2.引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.html页面代码 <div class="swiper-container" id="swiper"> <div class="swiper-wrapper"> <di

Angular 组件之间的交互的示例代码

在Angular应用开发中,组件可以说是随处可见的.本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法. 根据数据的传递方向,分为父组件向子组件传递.子组件向父组件传递及通过服务传递三种交互方法. 父组件向子组件传递 子组件通过@Input装饰器定义输入属性,然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据,子组件可通过setter或ngOnChanges()来截听输入属性值的变化. 先定义两个组件,分别为子组件DemoChildComponent和父组件De

在React 组件中使用Echarts的示例代码

在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的 这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之前要先安装ECharts,在以往的开发模式中,我们很多使用就是把官网中的ECharts的核心js文件

React 组件中的 bind(this)示例代码

React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Component { constructor() { super(); this.state = { isChecked: false }; } render() { return ( <div className="App"> <label > check me: &

json的键名为数字时的调用方式(示例代码)

对于键名为数字或者非正常变量字符时(如有空格),必须使用obj[xx]方式获取值. 复制代码 代码如下: <?php //声明json数据$array = array('result'=>array("90"=>"90队列","status"=>"成功"));$json = json_encode($array); $array1 = array("90"=>"90队

VUE JS 使用组件实现双向绑定的示例代码

1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据set时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的watcher,而ANGULARJS 是使用脏数据检查来实现的. 另外VUEJS 入门比ANGULARJS 简单,中文文档也很齐全. 2.组件实现 在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器. 在VU

react.js 父子组件数据绑定实时通讯的示例代码

react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记: import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Component{ render(){ return( <div style={{border:'1px solid red'}}> {this.props.count} </

使用iView Upload 组件实现手动上传图片的示例代码

在过去,浏览器是不允许我们读取本地的文件,包括图片.因此,当我们需要预览一个图片的时候,往往先将它传送到服务端,然后服务端返回一个访问 url 地址,达到预览图片的功能.如今,随着标准不断的改善,JavaScript 里的 API 越来越多,我们可以通过直接读取本地文件的方式来加载我们想要看到的文本或者图片,一定程度上减少了服务端的压力. Upload 组件参考文档:https://www.iviewui.com/components/upload 文档提供的参考代码: <template>

php版微信小店调用api示例代码

本文实例讲述了php版微信小店调用api的方法.分享给大家供大家参考,具体如下: 刚开始调用微信小店api的时候,可能大家会遇到问题.系统总是提示system error,归根结底还是发送的参数不正确. 下面给出几个调用例子: 例子写得不全. <?php function cUrlRequest($url,$data = null){ $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CU