情景:在调取接口后渲染数据时需要将选取的select设为默认值,具体案例为调取省份数据后,根据省份获取其对应的城市数据,并将其对应的el-select默认选中该数据的状态

问题:看到网上很多说直接改el-select绑定的v-model的值,这样做就会掉入select框中仅仅是显示相应的文字而已(可根据el-select选中的状态来判断,选中后点开下拉列表为蓝色加粗字体),这样就会导致初始化的页面中,需要根据省份选项才能展示的城市选项直接显示无数据状态。

而且el-option大多以:key="item.value",接口中的数据label为名字,value为其id值

<div >
          <p>发货地</p>
          <el-select v-model="deliverProvince" 
          ref="getdeliverProvince"
          clearable 
           placeholder="请选择省份"
           @change="changeProvince"
           >
            <el-option
              v-for="item in deliverProvinceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
            </el-select>
          <el-select v-model="deliverCity" clearable 
           placeholder="请选择城市"
           >
            <el-option
              v-for="item in search_city_option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

想了一下逻辑应该是可以优化,或者有其他的方法,比如在beforemount中添加一些函数,不过先这样了

 // 需要根据数据列表中的value值绑定
 getdeliverlocation() {
      for (let i in this.deliverProvinceList) {
        if (this.fhlocal[0] == this.deliverProvinceList[i].label) {
          this.deliverProvince = this.deliverProvinceList[i].value;
          this.search_city_option = [];
          this.deliverCity = "";
          this.changeFormatCity(
            this.search_city[this.deliverProvince],
            this.search_city_option
          );
        }else if(this.fhlocal[0].includes(this.deliverProvinceList[i].label)){
          this.deliverProvince = this.deliverProvinceList[i].value;
          this.search_city_option = [];
          this.deliverCity = "";
          this.changeFormatCity(
            this.search_city[this.deliverProvince],
            this.search_city_option
          );
        }
      }
      for (let n in this.search_city_option) {
        if (this.fhlocal[1] == this.search_city_option[n].label) {
          this.deliverCity = this.search_city_option[n].value;
        } else if (this.fhlocal[1].includes(this.search_city_option[n].label)) {
          this.deliverCity = this.search_city_option[n].value;
        }
      }
    },

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐