获取el-select的label

最新推荐文章于 2025-06-16 17:51:37 发布

原创最新推荐文章于 2025-06-16 17:51:37 发布 · 1.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

文章介绍了如何在Element-Plus的el-select组件中使用@click.native事件处理选项点击，并提供了两种方式获取选中的label：一种是通过方法传参，另一种是利用ref和Vue.nextTick获取DOM更新后的值。

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