react文档demo实现输入展示搜索结果列表

蓓蕾心晴

发布于 2018-04-12 14:44:43

1.4K0

发布于 2018-04-12 14:44:43

当二级联动比如选择国家的时候，希望选中一个国家的时候后面城市默认选中第一个城市，则给国家的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列表，选择城市的时候遍历这个列表，通过选择国家改变该列表。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-01-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除

iview