vue select二级城市联动及第二级默认选中第一个option值

相关文章推荐

想出国的大象 · vue ...· 1 月前 ·

无聊的莴苣 · Vue 中 $set() 与 ...· 1 月前 ·

坚韧的跑步鞋 · Layui ...· 1 月前 ·

挂过科的镜子 · VUE 使用 select ...· 1 月前 ·

风度翩翩的大海 · vue中vuedraggable拖拽插件使用 ...· 1 月前 ·

温暖的西红柿 · h5 设置剪切板内容 ...· 6 月前 ·

慷慨大方的胡萝卜 · Google日历推超方便新功能 ...· 11 月前 ·

含蓄的斑马 · 学习C++这一篇就够了（基础篇） - 知乎· 1 年前 ·

纯真的哑铃 · 使用Java开发OpenCV3程序-2.读取 ...· 1 年前 ·

刚毅的羊肉串 · Vue3 + Bootstrap4 ...· 1 年前 ·

当二级联动比如选择国家的时候，希望选中一个国家的时候后面城市默认选中第一个城市，则给国家的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>

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">
                    <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">
                    <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列表，选择城市的时候遍历这个列表，通过选择国家改变该列表。