在使用element ui时 select组件获取label问题

Posted 2020-10-07 一只西瓜

最近在工作的时候需要实现多个条件联合查询，这个其实就是一条sql语句。但是，我们数据库中存储的是根据前端传来id的值所对应的值，而不是直接存的id，使用select组件时，却只能取到value值，无法作为后台查询的条件。

我们需要的是select 组件的label值，而不是看不见的value值。

首先，根据element ui select组件使用手册，给组件添加\'change\'方法

1 @change=changeValue

再根据Array 的 find方法找出对应的值即可。

1 changeValue(value) {
2     console.log(value);
3       let obj = {};
4       obj = this.options.find((item)=>{
5           return item.value === value;
6       });
7       console.log(obj.label);
8 }

这里需要注意的是，code中\'this.options\'代表的是你需要获取label值的数组，\'item.value\'的\'value\'代表的是你数组中跟label对应的遍历的属性名。最后返回的item就是找到的对象。哦，还有就是\'obj.label\'的是数组中对应的显示的属性名。

小白勿喷~

参考文章：https://segmentfault.com/q/1010000009693531/a-1020000009696270