获取el-select的label

使用@click.navite

在 el-option 中添加 @clik.native 在方法的传参中传入自己需要的内容

这个方法同样适用于 element-plus

<template>
  <el-select v-model="selectValue">
    <el-option v-for="item in options" :key="item.value"
      :value="item.value"
      :label="item.label"
      @click.native="optionClick(item.label)"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'ElSelectTest',
    data() {
      return {
        selectValue: '',
        options: [
          { label: '苹果', value: 1 },
          { label: '香蕉', value: 2 },
          { label: '菠萝', value: 3 }
        ]
      }
    },
    methods: {
      optionClick(label) {
        console.log(label);
      }
    }
  }
</script>

使用ref获取

在 el-select 中添加 ref

使用 Vue.nextTick() 获取dom刷新后的label

这种方式不适用于 element-plus

<template>
  <el-select v-model="selectValue"
    ref="fruitSelect"
    @change="selectChange"
  >
    <el-option v-for="item in options" :key="item.value"
      :value="item.value"
      :label="item.label"
    >
    </el-option>
  </el-select>
</template>

<script>
  import Vue from 'vue';
  export default {
    name: 'ElSelectTest',
    data() {
      return {
        selectValue: '',
        options: [
          { label: '苹果', value: 1 },
          { label: '香蕉', value: 2 },
          { label: '菠萝', value: 3 }
        ]
      }
    },
    methods: {
      selectChange() {
        Vue.nextTick(() => {
          console.log(this.$refs.fruitSelect.selectedLabel);
        });
      }
    }
  }
</script>