Vue配合iView实现省市二级联动的示例代码
作者:Dong
本篇文章主要介绍了Vue配合iView实现省市二级联动的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在实现省市二级联动时,如果省份和城市写在一个数组对象中。可以根据,点击某个省份时获取到目标省份的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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vue.js组件tree实现省市多级联动
- vue省市区三联动下拉选择组件的实现
- vue学习之mintui picker选择器实现省市二级联动示例
- vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
- vue.js模仿京东省市区三级联动的选择组件实例代码
- Vue2仿淘宝实现省市区三级联动
- VUE2 前端实现 静态二级省市联动选择select的示例
- 使用vue2实现带地区编号和名称的省市县三级联动效果
- 基于Vue2实现简易的省市区县三级联动组件效果
- 详解Vue、element-ui、axios实现省市区三级联动
- vue + elementUI实现省市县三级联动的方法示例
- Vue实现省市区三级联动
- Vue自定义省市区三级联动
- vue + echarts实现中国省份地图点击联动