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语句可以不以;结尾的烦恼
Mar 08 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php格式化日期实例分析
2014/11/12 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
Python 中 list 的各项操作技巧
2017/04/13 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
用python实现学生管理系统
2020/07/24 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
JPA的优势都有哪些
2013/07/04 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
学生档案自我鉴定
2013/10/07 职场文书
校长四风对照检查材料
2014/09/27 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
素质教育培训心得体会
2016/01/19 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
Redis 哨兵集群的实现
2021/06/18 Redis