使用select选择器的记录

当选项过多时，使用下拉菜单展示并选择内容。使用change事件，选中值发生变化时触发此事件

  <el-select v-model="providerData" @change="choseProvider" popper-class="custom-select-style" >
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.label"
          :value="item.id">
      </el-option>
  </el-select>

<script>
  export default {
    data() {
      return {
        options: [{
            id: '1',
            label: '黄金糕'
            }, {
            id: '2',
            label: '双皮奶'
            }, {
            id: '3',
            label: '蚵仔煎'
            }, {
            id: '4',
            label: '龙须面'
            }, {
            id: '5',
            label: '北京烤鸭'
          }],
      providerData：'',
      }
    },
    methods: {
        choseProvider(data){
          this.providerData = data;
        },
    }
  }
</script>

• 完成效果图

  
  

最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。