foreword
Recently, I always encountered some strange requirements during development. For example, the el-select component needs to obtain the label value and value selected by the user at the same time . According to the background staff, only one value can be passed to match the data. Harm, this is not easy, so I will pass it on. Let me share with you a few ways to quickly get the label value selected by the user.
1. Use the Arry.find method
Arry.find()The method returns the value of the first element in the array that satisfies the provided test function, or returns if there is no element that satisfies the test function undefined.
| parameter | describe |
|---|---|
| function(currentValue, index,arr) | required. The function to be executed for each element of the array. where currentValueis required. Means the current element; indexnot required, means the index value of the current element; arrnot required, means the array object to which the current element belongs. |
| thisValue | Not required. The value passed to the function is typically thisthe value . If this parameter is empty, undefinedit will be passed to thisthe value |
code show as below:
<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. Pass parameters by binding the native click event
code show as below:
<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. Using the ref/$refs method
$refsGet el-selectthe component instance through , which has selectedLabelthe attribute , whose value is currently selected; you can also get the selected component instance throughlabel , which has two attributes of and .selectedoptionlabelvalue
code show as below:
<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>
The effect is as follows:
