在實現省市二級聯動時,如果省份和城市寫在一個數組對象中。可以根據,點擊某個省份時獲取到目標省份的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> 以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答