vue el-select默认值-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue el-select默认值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

情景：在调取接口后渲染数据时需要将选取的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中添加一些函数，不过先这样了文章来源地址https://www.toymoban.com/news/detail-542041.html

 // 需要根据数据列表中的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;
        }
      }
    },

到了这里，关于vue el-select默认值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！