如何拿到选项的label

在我们的日常开发中，下拉框获取值是一个很常见的业务方法。

image-20230306182428928

基本上都是拿到代码里的value，如果有一天，我需要label的值该如何拿到呢？

这里提供几个方法：

方法1

通过find函数去过滤对应的label，具体方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
<script setup>
import { ref } from 'vue'
const value = ref('')
let obj = ref({})
const getLabel = (value) => {
  console.log(value)
  obj = options.find((item) => {
    return item.value === value
  })
  console.log(obj.label)
}
</script>

image-20230306184810077

image-20230306185136646

这里通过find 找到了对应的值。

方法2

我们可以直接通过绑定值拿label，具体方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <el-select
    v-model="value"
    placeholder="Select"
    size="large"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="`${item.label}||${item.value}`"
    />
  </el-select>
  当前的选项值为： {{ value }}
</template>
image-20230306185632897

这样我们可以同时拿到选中的label和value，后期通过 value.split("||")进行分割拿到。

方法3

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

1
2
3
4
5
6
7
8
<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);
}

方法4

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

1
2
3
4
5
6
7
8
9
10
11

<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);
})
}

当然，这里我并没有测试性能问题，这里只是给出了对应的解决办法，enmmm,其实还有一种更加简便的方法，那就是全都绑定label值就行了🤪

部分来自于互联网，侵删。