當(dāng)選項(xiàng)過多時(shí)，使用下拉菜單展示并選擇內(nèi)容。使用change事件，選中值發(fā)生變化時(shí)觸發(fā)此事件

  <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>

• 完成效果圖

  
  

最后還需要提醒大家一點(diǎn)，本篇文章中的例子僅供參考學(xué)習(xí)，切誤將本篇文章中的代碼直接使用在正式項(xiàng)目當(dāng)中。希望以上代碼對(duì)大家有所幫助。