当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了
<div class="inputLine"> <span>所在区域</span> <select name="" v-model="countryName" @change="selectCountry"> <option :value="item" v-for="(item,index) in area"> {{item.country}} <svg class="icon icon-arrow-bottom" aria-hidden="true"> <use xlink:href="#icon-arrow-bottom"></use> </svg> </option> </select> <select name="" v-model="cityName"> <option :value="item" v-for="(item,index) in countryName.city"> {{item}} <svg class="icon icon-arrow-bottom" aria-hidden="true"> <use xlink:href="#icon-arrow-bottom"></use> </svg> </option> </select> </div>
data countryName:{}, cityName:"请选择城市", area:[ { "country":"美国", "city":[ "纽约", "洛杉矶", "旧金山", "西雅图", "波士顿", "休斯顿", "圣地亚哥", "芝加哥", "其它", ] }, { "country":"加拿大", "city":[ "温哥华", "多伦多", "蒙特利尔", "其它" ] }, { "country":"澳大利亚", "city":[ "悉尼", "墨尔本", "其它" ] }, { "country":"新加坡", "city":[ "新加坡" ] }, /*{ "country":"中国", "city":[ "北京市", ] },*/ ],
methods:
selectCountry(value){ this.cityName=this.countryName.city[0]; },
2018.3.13 更新
后来新版本的iview select value的值不支持定义对象形式,所以会报错:
@change事件改为了@on-change 事件
于是换一个实现方法:
<FormItem label="国家" prop="country"> <Row> <Col span="7"> <Select v-model="formValidate.country" @on-change="selectCountry" placeholder="请选择国家"> <Option v-for="(item,index) in area" :value="item.country" :key="index">{{item.country}}</Option> </Select> </Col> <Col span="17"> </Col> </Row> </FormItem> <FormItem label="城市" prop="city"> <Row> <Col span="7"> <Select v-model="formValidate.city" placeholder="请选择城市"> <Option v-for="(item,index) in city" :value="item" :key="index">{{item}}</Option> </Select> </Col> <Col span="17"> </Col> </Row> </FormItem>
data(){ return { formValidate: { country:'', city:'', }, area:[ { "country":"美国", "city":[ "纽约", "洛杉矶", "旧金山", "西雅图", "波士顿", "休斯顿", "圣地亚哥", "芝加哥", "其它", ] }, { "country":"加拿大", "city":[ "温哥华", "多伦多", "蒙特利尔", "其它" ] }, { "country":"澳大利亚", "city":[ "悉尼", "墨尔本", "其它" ] }, { "country":"新加坡", "city":[ "新加坡" ] }, /*{ "country":"中国", "city":[ "北京市", ] },*/ ], city:[] } }
methods: { selectCountry(value){ const _this=this; this.area.forEach(function (item,index) { if(item.country==value){ _this.city=item.city; _this.formValidate.city=_this.city[0]; } }) } },
新定义一个数组存放被筛选出来的city列表,选择城市的时候遍历这个列表,通过选择国家改变该列表。