有时候因为需求等情况,我们需要拿到select选择器选择的整个对象,不光只拿到他的value

当使用element ui 的select选择器选择一个选项时,使用@change事件时只能得到一个Id,想要得到Id对应的对象用到filter进行过滤取到才可以。

方式一

<el-select v-model="dataForm.varietyIds" multiple placeholder="请选择"         
  @change="changeVarietyIds">
   <el-option
     v-for="item in options"
     :key="item.id"
     :label="item.name"
     :value="item.id"
   />
 </el-select>
 
 changeVarietyIds(val) {
   this.$forceUpdate()
   let newList = []
   val.map(v => {
     const list = this.options.filter(item => {
       return item.id === v
     })
     let obj = list[0]
     newList.push(obj)
   })
 },

方式二

<el-select
  value-key="id"
  @change="searchSelect"
  v-model="addRuleform.diseaseCode"
  placeholder="请选择"
  clearable>

    <el-option
      v-for="item in options"
      key="item.id"
      :label="item.name"
      :value="item">
     </el-option>

</el-select>


//change方法
searchSelect(val){

  console.log("val",val)

},

这里的重点在于:
1.value-key绑定唯一标识,el-option的key值是不错的选择
2.@change方法不带参数
3.el-option的value绑定的是item对象

结果

 已经拿到了预期的值,后续操作就看需求。

 本文结束。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐