前言
最近在开发时总遇到一些起奇奇怪怪的需求，例如 el-select 组件需要同时获取用户选中的 label 值跟 value 值，据后台人员说是只传一个 value 匹配不上数据。害，这还不简单，那我就都传过去呗，下面给大家分享几种快速拿到用户选中 label 值的方法。
1. 使用 Arry.find 方法
Arry.find() 方法返回数组中满足提供的测试函数的第一个元素的值，若没有满足测试函数的元素，则返回 undefined。
| 参数 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必需。数组每个元素需要执行的函数。其中 currentValue 为必需。意为当前元素；index 非必需，意为当前元素的索引值；arr 非必需，意为当前元素所属的数组对象。 |
| thisValue | 非必需。 传递给函数的值一般用 this 值。如果这个参数为空， undefined 会传递给 this 值 |
代码如下：
<template>
<div>
<el-select @change="touchOn" v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "0",
label: "黄金糕",
},
{
value: "1",
label: "双皮奶",
},
{
value: "2",
label: "蚵仔煎",
},
{
value: "3",
label: "龙须面",
},
{
value: "4",
label: "北京烤鸭",
},
],
value: "",
};
},
mounted() {
},
methods: {
// 选中值发生变化时触发
touchOn(e) {
//任选其一即可
let obj = {
};
obj = this.options.find((item) => {
return item.value === e;
});
console.log(obj.label);
//任选其一即可
let objLabel = this.options.find((item) => item.value == e).label;
console.log(objLabel);
},
},
};
</script>
2. 通过绑定原生 click 事件来进行传参
代码如下：
<template>
<div>
<el-select v-model="value" placeholder="请选择">
<el-option @click.native="labelOn(item.label)" v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "0",
label: "黄金糕",
},
{
value: "1",
label: "双皮奶",
},
{
value: "2",
label: "蚵仔煎",
},
{
value: "3",
label: "龙须面",
},
{
value: "4",
label: "北京烤鸭",
},
],
value: "",
};
},
mounted() {
},
methods: {
labelOn(e) {
console.log(e);
},
},
};
</script>
3. 使用 ref/$refs 方法
通过 $refs 拿到 el-select 组件实例，该实例拥有 selectedLabel 属性，值为当前选中的 label；也可以通过 selected 拿到选中的 option 的组件实例，拥有 label 和 value 两个属性。
代码如下：
<template>
<div>
<el-select @change="touchOn" ref="labelRef" v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "0",
label: "黄金糕",
},
{
value: "1",
label: "双皮奶",
},
{
value: "2",
label: "蚵仔煎",
},
{
value: "3",
label: "龙须面",
},
{
value: "4",
label: "北京烤鸭",
},
],
value: "",
};
},
mounted() {
},
methods: {
// 选中值发生变化时触发
touchOn(e) {
//一定要放在this.$nextTic方法中，否则第一次拿不到值
this.$nextTick(() => {
console.log(this.$refs.labelRef.selectedLabel);
console.log(this.$refs.labelRef.selected.label);
});
},
},
};
</script>
实现效果如下：
