element之select选择框多选框获取label值回显

一、select单选框

点击查看代码

<el-select 
  v-model="courierCompany" 
  @change="onSelectedDrug($event)" 
  maxlength=12 
  filterable
  placeholder="请选择">
    <el-option 
      v-for="item in expressList"
      :key="item.value"//一定要与value的值相同
      :label="item.name"
      :value="item.value"
    />
 </el-select>

onSelectedDrug(val){
  let obj = {};
  obj = this.expressList.find((item)=>{//这里的userList就是上面遍历的数据源
    return item.value === val;//筛选出匹配数据
  });
  console.log(obj);//获取的item所有的值
  console.log(obj.label);//获取的label
  console.log(item);//获取的value
}

二、select多选框

<el-select
   v-model="value"
   multiple
   collapse-tags
   ref="select"
   @change="changeLocationValue" //将用到此方法
   style="margin-left: 20px;"
   placeholder="请选择角色">
   <el-option
     v-for="item in options" //options 数据源
     :key="item.id"
     :label="item.roleName" //我的label是 roleName
     :value="item.id"> //我的value 是 id
   </el-option>
</el-select>

data(){
    return {
      options:[
         {id:1,roleName:'dafe'},
         {id:2,roleName:'gged'},
         {id:3,roleName:'dafgddvde'},
         {id:4,roleName:'hjrtb'},
         {id:5,roleName:'fgdcbd'}
       ],
      departmentIds:[],
      departmentNames:[]       
    }
}

changeLocationValue(val){
   this.departmentIds = [] //初始化数据
   this.departmentNames = [] //初始化数据
   for(let i=0;i<=val.length-1;i++){
     this.options.find((item)=>{ //这里的options就是数据源
       if(item.id == val[i]){
         this.departmentIds.push(item.id) //这里的value我改成了id
         this.departmentNames.push(item.roleName) //这里的label我改成了roleName
       }
     });
   }
   console.log(this.departmentIds)
   console.log(this.departmentNames)
},