要求下拉框在没有选中项的时候，有则显示选中项，若没有则给赋予另一个不存在选项中的值做展示。以下是解题思路：
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
