其他分享
首页 > 其他分享> > Select下拉框需求

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