Select下拉框需求

要求下拉框在没有选中项的时候，有则显示选中项，若没有则给赋予另一个不存在选项中的值做展示。以下是解题思路：
1、确认是否有返回选中项，有则直接显示。
2、如果没有返回选中项，则将另一个自定义的默认值赋值给下拉框做展示。
3、判断自定义的默认值是否存在下拉列表中，如果没有下拉框集合则需要做数据处理后展示。

数据处理步骤：
1、判断选中项是否为空，否则跳出执行，是则执行下一步。
2、定义一个标识符flag。
3、循环下拉集合的数据，判断是否存在自定义的默认值。存在则flag为true，则不处理集合。不存在则flag为false，直到循环结束。
4、标识符flag为false，将自定义的默认值按照集合的数据格式push进当前集合中，并将选中项更改为自定义的默认值，完成。
5、使用计算属性的方式则需要 return 当前集合。

解题步骤：
1、确认数据项
cityList 下拉列表集合
selected 下拉框选中项
otherCity 自定义的默认值

cityList: [
     {
        value: 'New York',
        label: 'New York'
    },
    {
        value: 'London',
        label: 'London'
    },
    {
        value: 'Sydney',
        label: 'Sydney'
    },
    {
        value: 'Ottawa',
        label: 'Ottawa'
    },
    {
        value: 'Paris',
        label: 'Paris'
    },
    {
        value: 'Canberra',
        label: 'Canberra'
    }
],
selected: '',
otherCity: 'beijing'

2、数据处理方法一，在created中初始化数据。文中是在data中已经定义好的数据集合，如果是通过接口请求的，可以在接口回调成功的than中处理数据。

HTML: 
<Select v-model="selected" style="width:200px">
     <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>

JS:
created() {
     !this.selected && this.init();
},
methods: {
        init() {
        let flag = false;
        this.cityList.forEach((item, index) => {
            if(item.label == this.otherCity){
                flag = true;
            } else {
                flag = false;
            }
        });
        if (!flag) {
            this.cityList.push({ value: this.otherCity, label: this.otherCity });
            this.selected = this.otherCity;
        }
    }
}

3、数据处理方法二，通过计算属性方式实现效果。

HTML: 
<Select v-model="selected" style="width:200px">
     <Option v-for="item in newCityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>

JS:
computed: {
   newCityList: function() {
      let flag = false;
      if (this.selected) {
          this.cityList.forEach((item, index) => {
              if(item.label == this.otherCity){
                  flag = true;
              } else {
                  flag = false;
              }
          });
          if (!flag) {
              this.cityList.push({ value: this.otherCity, label: this.otherCity });
              this.selected = this.otherCity;
          }
      }
      return this.cityList;
  }
}

以上就是实现方案了。小伙伴们若是有更好的方法，欢迎指教。 O(∩_∩)O

标签：需求,cityList,自定义,otherCity,label,flag,value,下拉框,Select
来源： https://www.cnblogs.com/min77/p/15513697.html