快捷導(dǎo)航

Vue Element如何獲取select選擇框選擇的value和label

更新時(shí)間：2025年01月30日 07:07:48 作者：孫悟空

文章介紹了兩種使用Vue.js和ElementUI獲取select選擇框值的方法：一種是使用watch監(jiān)聽selectedValue的變化,另一種是使用@change事件,兩種方法都能實(shí)現(xiàn)獲取選擇的value和label

1 使用watch監(jiān)聽selectedValue的變化

可以使用Element UI中的v-model指令，將選中的值和對(duì)應(yīng)的標(biāo)簽存儲(chǔ)在data中的變量中

具體代碼如下：

<template>
  <el-select v-model="selectedValue" placeholder="請(qǐng)選擇">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>
  <div>
    <div>選擇的值：{{ selectedValue }}</div>
    <div>對(duì)應(yīng)的標(biāo)簽：{{ selectedLabel }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '選項(xiàng)1' },
        { value: 'option2', label: '選項(xiàng)2' },
        { value: 'option3', label: '選項(xiàng)3' }
      ],
      selectedValue: '',
      selectedLabel: ''
    };
  },
  watch: {
    selectedValue(newVal) {
      const option = this.options.find(item => item.value === newVal);
      this.selectedLabel = option ? option.label : '';
    }
  }
};
</script>

結(jié)果展示：

在template中，v-model指令綁定了selectedValue變量，表示選中的值。

同時(shí)，給<el-option>添加了v-for循環(huán)生成所有的選項(xiàng)。

當(dāng)選中的值改變時(shí)，使用watch監(jiān)聽selectedValue的變化，通過(guò)find方法從options中找到選中的值對(duì)應(yīng)的選項(xiàng)，并將標(biāo)簽存儲(chǔ)在selectedLabel變量中。

最后，將selectedValue和selectedLabel顯示在頁(yè)面上。

2 @change事件獲取

2.1 只返回選擇的value

<template>
  <div>
    <el-select v-model="selectedValue" @change="getSelectValue">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
       	{ value: 'option1', label: '選項(xiàng)1' },
        { value: 'option2', label: '選項(xiàng)2' },
        { value: 'option3', label: '選項(xiàng)3' }
      ],
      selectedValue: '',
    };
  },
  methods: {
    getSelectValue(data) {
     console.log('value', data);
    },
  },
};
</script>

結(jié)果展示：

2.2 返回選擇的value和label

下面是一個(gè)使用@change獲取element選擇框的值和名稱的Vue示例代碼：

<template>
  <div>
    <el-select v-model="selectedOption" @change="handleOptionChange">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      >
      </el-option>
    </el-select>
    <p>Selected Option: {{ selectedOption }}</p>
    <p>Selected Option Label: {{ selectedOptionLabel }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
       	{ value: 'option1', label: '選項(xiàng)1' },
        { value: 'option2', label: '選項(xiàng)2' },
        { value: 'option3', label: '選項(xiàng)3' }
      ],
      selectedOption: '',
      selectedOptionLabel: '',
    };
  },
  methods: {
    handleOptionChange() {
      this.selectedOptionLabel = this.options.find(
        (option) => option.value === this.selectedOption
      ).label;
    },
  },
};
</script>

結(jié)果展示：