vue的el-select同时获取label和value值

最新推荐文章于 2024-08-11 02:01:29 发布

Zero-To-One

最新推荐文章于 2024-08-11 02:01:29 发布

阅读量493

点赞数

分类专栏： # vue2 文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_37580383/article/details/121711853

版权

vue2 专栏收录该内容

31 篇文章

订阅专栏

该案例展示了在Vue.js中如何实现设备类型的下拉选择，并在选中时更新设备类型名称。通过v-model双向绑定，监听change事件以及Array.prototype.find方法，实现了根据设备类型ID查找并设置对应的设备类型名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

template的代码:

  <el-form-item label="设备类型:" prop="equipmentTypeDictionaryId">
      <el-select v-model="equipmentTypeInfo.equipmentTypeDictionaryId" filterable placeholder="试试搜索:访客机" @change="selectType">
          <el-option v-for="item in deviceType" :key="item.equipmentTypeDictionaryId" :label="item.equipmentTypeName" :value="item.equipmentTypeDictionaryId" />
      </el-select>
  </el-form-item>

script中method里代码:

// 选择设备类型
selectType (id) {
  let selectedItem = {}
  selectedItem = this.deviceType.find((item) => { // 这里的deviceType就是上面遍历的数据源
     return item.equipmentTypeDictionaryId === id // 筛选出匹配数据，是对应数据的整个对象
  })
  this.equipmentTypeInfo.typeName = selectedItem.equipmentTypeName // 设备类型
},

案例中是通过equippiypeDictionaryId 匹配找到其selectedItem,从而实现获取selectedItem.equipmentTypeName