Vue配合iView实现省市二级联动的示例代码


Posted in Javascript onJuly 27, 2018

在实现省市二级联动时,如果省份和城市写在一个数组对象中。可以根据,点击某个省份时获取到目标省份的id 是否同 数组中的某个对象id一致 来判断

iView中的on-change事件

on-change事件:即选中的Option变化时触发,默认返回 value。(value在这里只支持String和Number类型)

1、html部分

<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
    <FormItem prop="province" label="省份">
       <Select v-model="formValidate.province" placeholder="请选择城市" @on-change="change">
        <Option v-for="item in provinceArr" :key="item.id" :value="item.id" >{{ item.name}}</Option>
       </Select>
    </FormItem>
    <FormItem prop="city" label="城市">
       <Select v-model="formValidate.city" placeholder="请选择省份">
         <Option v-for="item in cities" :key="item.id" :value="item.id" >{{ item.name}}</Option>
       </Select>
     </FormItem>
   </Form>
</template>

2、JS主要部分

<script>
  export default{
    data(){
      return {
        provinceArr: [
          {
            id:1,
            name:"北京市",
            cities:[{id:11,
                name:"北京市"}]
          },
          {
            id:2,
            name:"天津市",
            cities:[{id:12,
                name:"天津市"} ]
          },
          {
            id:3,
            name:"上海市",
            cities:[ {id:13,
                name:"上海市"} ]
          }
        ],
        cities: "",
        formValidate:...,
        ruleValidate:...
      }
    },
    methods:{
      change(val){
       for(var i=0; i<this.provinceArr.length; i++){
        if(val == this.provinceArr[i].id ){
         this.cities = this.provinceArr[i].cities;
        }
       }
      }
    }
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
js中this的用法实例分析
Jan 10 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
react native 文字轮播的实现示例
Jul 27 #Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 #Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 #Javascript
在vue中使用Autoprefixed的方法
Jul 27 #Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 #Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 #Javascript
Vue头像处理方案小结
Jul 26 #Javascript
You might like
php全局变量和类配合使用深刻理解
2013/06/05 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
JQuery之拖拽插件实现代码
2011/04/14 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
python 实时遍历日志文件
2016/04/12 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python查看微信撤回消息代码
2018/06/07 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
什么是python的函数体
2020/06/19 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
收银员岗位职责
2014/02/07 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
利用python做数据拟合详情
2021/11/17 Python