如何取到el-select中的label

Posted 2021-03-23 wzfwaf

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

就是这些了，希望对你有帮助