• 欢迎光临~

el-select获取选中label值

开发技术 开发技术 2022-09-29 次浏览

原文链接: https://blog.csdn.net/m0_38038870/article/details/123418588
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) {
console.log(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);
}

 

3.通过 $refs 拿到 el-select 组件实例,该实例拥有 selectedLabel 属性,为当前选中的 label。
或者可以通过 selected 拿到选中的 option 的组件实例,拥有 label 和 value 两个属性。

<el-select ref="selectLabel" v-model="value" placeholder="请选择" @change="getLabel">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>

getLabel(){
this.$nextTick(()=>{
console.log(this.$refs.selectLabel.selectedLabel);
console.log(this.$refs.selectLabel.selected.label);
})
}

程序员灯塔
转载请注明原文链接:el-select获取选中label值
喜欢 (0)