如何取到el-select中的label

在el-select中咱们通常都是取到value的值，可是有时候咱们须要value和label都须要。那怎么方便的取到呢

在网上常常有ref="cascader"这个方法，可是通过本人屡次验证有时候这种方法不太稳定。因此还有其余两种方法下面说一下：

通常el-select的写法是这样的

　　　　　　　 <el-select v-model="searthareathree" size="small" filterable placeholder="请选择区域">
              <el-option ref="cascader" v-for="item in optionsZonethree" :key="item.district_id" :label="item.district_name" :value="item.district_id">
              </el-option>
            </el-select>

咱们给一种方法能够经过for循环经过与取中的model对比，取到对应的label;以下所示：

 pushfranchisee(){ for(let a=0;a<this.optionsZonethree.length;a++){ if(this.searthareathree==this.optionsZonethree[a].district_id){ this.labelname=this.optionsZonethree[a].district_name } } }

这样this.labelname就是要取到的label的值了，可是这种方法在数据少的时候还好，可是可是数据多的时候可能加载时间会长一点；

因此咱们还能够用一种新方法find来解决

let selectName=this.optionsZonethree.find(val=>val.district_id==this.searthareathree).district_name console.log(selectName)

这样就能够直接打印出来label的值了

下面说一下find方法

 

find()方法返回数组中符合的第一个值，效果和swith相似，可是简单不少，

用法：

array.find(function(currentValue, index, arr),thisValue)
参数：

currentValue 必需。当前元素

index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
thisValue 可选。 传递给函数的值通常用 "this" 值。
若是这个参数为空， "undefined" 会传递给 "this" 值

方法返回值：返回符合测试条件的第一个数组元素值，若是没有符合条件的则返回 undefined。
EG:
var ages = [4, 12, 16, 20];
 function checkAdult(age) { 
　　return age >= document.getElementById("ageToCheck").value; 
} 
function myFunction() { 
　　document.getElementById("demo").innerHTML = ages.find(checkAdult); 
}就是这些了，但愿对你有帮助