Vue之el-option下拉框綁定問題

更新時間：2023年05月20日 10:45:09 作者：tellmewsm

這篇文章主要介紹了Vue之el-option下拉框綁定問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

el-option下拉框綁定問題

1、正常使用v-for進(jìn)行遍歷下拉框內(nèi)容

如果需要增加一個自定義的值，則加一個el-option

el-option用法：

參數(shù)	說明	類型	可選值	默認(rèn)值
value	選項(xiàng)的值	string/number/object	—	—
label	選項(xiàng)的標(biāo)簽，若不設(shè)置則默認(rèn)與 value 相同	string/number	—	—
disabled	是否禁用該選項(xiàng)	boolean	—	false

在日常使用el-select 中，新增一條option 如果value對應(yīng)到值是string則不影響前端顯示

<el-option key="6" label="蘇州大閘蟹" value="6" />

遇到下拉框不顯示label值,如果綁定的vaule 是number，則需要前面加上：不然會匹配不到，String不加:沒問題

具體v-bind

<el-option key="6" label="蘇州大閘蟹" :value="6" />

demo如下：

<template>
  <div>
    <el-button @click="printSelect">調(diào)試</el-button>
    //value1 的類型 需要跟:value="item.value" 一樣
    <el-select ref="selectValue1" v-model="value1" filterable placeholder="請選擇">
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      //vaule1 為string 則 value="選項(xiàng)6" 前面可以不用加：即v-bind 數(shù)據(jù)綁定
      <el-option key="選項(xiàng)6" label="揚(yáng)州炒飯" value="選項(xiàng)6" />
    </el-select>
    <el-select ref="selectValue2" v-model="value2" no-match-text filterable placeholder="請選擇">
      //value2為number 前面需要：
      <el-option key="5" label="揚(yáng)州炒飯" :value="5" />
      <el-option key="6" label="蘇州大閘蟹" :value="6" />
    </el-select>
  </div>
</template>

js如下：printSelect方法測試頁面顯示和選中之后數(shù)據(jù)類型和值

<script>
export default {
  data() {
    return {
      options1: [{
        value: '選項(xiàng)1',
        label: '黃金糕'
      }, {
        value: '選項(xiàng)2',
        label: '雙皮奶'
      }, {
        value: '選項(xiàng)3',
        label: '蚵仔煎'
      }, {
        value: '選項(xiàng)4',
        label: '龍須面'
      }, {
        value: '選項(xiàng)5',
        label: '北京烤鴨'
      }],
      value1: '選項(xiàng)1',
      value2: ''
    }
  },
  created() {
    //修改value1 value2 值，查看頁面是否匹配到label
    this.getValue()
  },
  methods: {
    printSelect: function() {
        //打印選中到 類型 值 和label值
      console.log(typeof this.value1 + '-' + this.value1 + '-' + this.$refs.selectValue1.selected.label)
      console.log(typeof this.value2 + '-' + this.value2 + '-' + this.$refs.selectValue2.selected.label)
    },
    getValue: function() {
      this.value1 = '選項(xiàng)2'
      this.value2 = 5
    }
  }
}
</script>

2、測試頁面顯示如下

第二個下拉框如果改成

<el-option key="5" label="揚(yáng)州炒飯" value="5" />

則label顯示不了label值

如何在el-option中綁定事件

我想實(shí)現(xiàn)這樣一個功能，我從后臺獲取到一組數(shù)組，想把它放到el-select下拉框當(dāng)中，然后在每點(diǎn)擊一個el-option選項(xiàng)時，完成一次頁面的跳轉(zhuǎn)，因此在我的每一個el-option當(dāng)中，不只是有value和key這兩個屬性，還帶著一些關(guān)于跳轉(zhuǎn)的字段信息。

我的目的就是點(diǎn)擊下拉框的a頁面，然后它給我跳轉(zhuǎn)到’/a’，第一反應(yīng)肯定就是在el-option當(dāng)中添加一個點(diǎn)擊事件，但結(jié)果不盡人意，后來才發(fā)現(xiàn)el-option是不能觸發(fā)事件的。只能在el-select添加一個change事件，change事件的確可以觸發(fā)，但只能獲取到一個數(shù)據(jù)，就是model綁定的那個值（也就是name屬性），那這就很惱火了，我的path怎么去獲取呢？

方案

我的解決方法比較粗暴，直接在el-option里面加上一個span元素，由于它在el-option里面，因此可以繼承到item，這時只要在span元素寫上{{item.name}}，然后設(shè)置為行級塊元素并填充滿整個el-option，并給它添加一個點(diǎn)擊事件@click=hancleClick(item)，over！！