杜鹃啼血染花红,山后山前一画中。旅行的意义不在于浏览风景,而是到一个完全陌生的环境,放空自己,感受享受孤独!
在实现省市二级联动时,如果省份和城市写在一个数组对象中。可以根据,点击某个省份时获取到目标省份的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配合iView如何实现省市二级联动的示例代码就介绍到这了。有些人生来是为了赶路的…完成学业事业结婚生子,一切有条不紊按部就班,匆匆忙忙在前三十年生命里就完成了大部分任务,再用剩下的时间去修补与忍耐,并学着苦中作乐。而有些人的人生任务可能只完成了一半,但他们却看了别人几辈子才能看到的风景,你不能说任何一种选择是错。真的,自己开心就好。更多相关Vue配合iView如何实现省市二级联动的示例代码内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!