使用el-select是想要拿到id对应的label

最新推荐文章于 2023-10-25 10:05:00 发布

原创最新推荐文章于 2023-10-25 10:05:00 发布 · 1.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

element 专栏收录该内容

1 篇文章

订阅专栏

本文主要记录在Vue项目中遇到的问题，当使用el-select组件时，通常只能获取到选中的id（value），而实际需求是获取label。通过运用Array.prototype.find()方法，可以在数组中查找与id匹配的元素并返回其label，该方法遍历数组直到找到符合条件的元素并返回，若无匹配项则返回undefined。find()方法不会改变原数组。

此文章只是用于记录

页面有的地方需要拿到值（label）但我们总是拿到id（value）

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

<el-select
 class="select"
  v-model="send"
  placeholder="请选择负责人"
  @change="changelabel"
>
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.name + ':' + item.account"
    :value="item.uid"
  >
  </el-option>
</el-select>

data() {
   return {
  	 send："",
  	 options:[],
   }
}
methods：{
	changelabel(value) {
	  console.log(value);
	  let obj = {};
	  obj = this.options.find((item) => {
	    return item.uid === value;
	  });
	  this.listsend = obj.name + ":" + obj.account;
	},
}