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=请选择城市}</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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
评论