el-select获取选中label值

原创

已于 2023-03-03 09:44:28 修改 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-03-02 16:35:47 首次发布

文章介绍了在Vue.js中使用ElementUI的el-select组件时，如何获取选中项的标签信息。方法包括：1)使用Array.find方法结合变更事件；2)绑定原生click事件传递参数；3)通过$refs获取selectedLabel或selected对象的属性。

1.用Arry.find方法

<el-select v-model="value" placeholder="请选择" @change="getLabel">
    <el-option v-for="item in options" :key="item.value" :label="item.label"                 
    :value="item.value">
    </el-option>
</el-select>
    getLabel(value) {
        let obj = {};
        obj = this.options.find((item)=>{
              return item.value === value;
        });
        console.log(obj.label);
    }

2.通过绑定原生click事件来进行传参

<el-select v-model="value" placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :label="item.label"     
    :value="item.value" @click.native="labelClick(item.label)">
    </el-option>
</el-select>
    labelClick(data){
        console.log(data);
    }