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 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
js字符编码函数区别分析
Dec 28 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
详解js类型判断
May 22 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 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
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python黑魔法之编码转换
2016/01/25 Python
python 全文检索引擎详解
2017/04/25 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
numpy中的高维数组转置实例
2018/04/17 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
质量工程师岗位职责
2013/11/16 职场文书
优秀教师先进事迹
2014/01/22 职场文书
考试不及格的检讨书
2014/01/22 职场文书
公开服务承诺制度
2014/03/26 职场文书
辞职信的写法
2015/02/27 职场文书
PHP中->和=>的意思
2021/03/31 PHP
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers