el-select如何获取当前选中的对象所有(item)数据

 更新时间:2023年11月24日 08:59:08   作者:楚楚梦厦  
在开发业务场景中我们通常遇到一些奇怪的需求,下面这篇文章主要给大家介绍了关于el-select如何获取当前选中的对象所有(item)数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

场景

在应用elementUIel-select下拉框的时候,界面展示只需要文案就足够了, 但我们传参给后端可能需要多个字段 ,如有以下后端接口返回数据:

const optionsList = [
	{
		name: '',
		id: '',
		class_name:'',
		class_type: '',
		english_name: '',
		is_default: false,
		online_worker_count: 0,
		time: "2022-12-26 16:30:21",
	}
	...
]

即需要获取当前选择的name对应的对象的所有数据

实现

使用element官方的属性:

value-key 作为 value 唯一标识的键名,绑定值为对象类型时必填

<el-form-item v-for="(workerItem, index) in form.data.worker_groups" :key="'workerGroups_'+ index"
                          style="margin-top: 10px">
	<el-select v-model="form.data.worker_groups[index]" value-key="name" filterable clearable placeholder="请选择">
		<el-option
		   v-for="item in data.workerGroups"
		     :key="item.id"
		     :label="item.name"
		     :value="item">
		 </el-option>
	</el-select>
</el-form-item>

注意点

  • el-select的v-model绑定当前的对象
  • 不能直接绑定workerItem会报错,使用form.data.worker_groups[index] 索引获取当前对象。
  • el-option的value绑定最后我们想获取的当前对象
  • value-key的值可以和label对应

附:el-select获取点击项的整个对象item

<template>
  <!--v-model绑定一个对象值,指定value-key标识-->
  <el-select v-model="obj" value-key="id" @change="change" placeholder="请选择">
    <el-option
        v-for="(item,index) in options"
        :key="index"
        :label="item.name"
        <!--绑定整个对象item-->
        :value="item">
      {{ item.name }}
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      options: [{
        id: 1,
        name: '黄金糕'
      }, {
        id: 2,
        name: '双皮奶'
      }, {
        id: 3,
        name: '蚵仔煎'
      }, {
        id: 4,
        name: '龙须面'
      }, {
        id: 5,
        name: '北京烤鸭'
      }],
      obj: {}
    }
  },
  methods: {
    change(item) {
      console.log(item);// 打印整个对象
    }
  }
}
</script>

总结 

到此这篇关于el-select如何获取当前选中的对象所有(item)数据的文章就介绍到这了,更多相关el-select获取对象所有数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中template的三种写法示例

    vue中template的三种写法示例

    这篇文章主要介绍了vue中template的三种写法示例,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-10-10
  • 如何基于Vue制作一个猜拳小游戏

    如何基于Vue制作一个猜拳小游戏

    Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式,下面这篇文章主要给大家介绍了关于如何基于Vue制作一个猜拳小游戏的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue中使用定义好的变量设置css样式详解

    vue中使用定义好的变量设置css样式详解

    vue项目中我们可以通过行内样式进行动态修改样式,下面这篇文章主要给大家介绍了关于vue中如何使用定义好的变量设置css样式的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • vue单向以及双向数据绑定方式(v-bind和v-model的使用)

    vue单向以及双向数据绑定方式(v-bind和v-model的使用)

    这篇文章主要介绍了vue单向以及双向数据绑定方式(v-bind和v-model的使用),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue数据增删改查与表单验证的实现流程介绍

    Vue数据增删改查与表单验证的实现流程介绍

    这篇文章主要介绍了Vue数据增删改查与表单验证的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-10-10
  • 详解Vue中CSS样式穿透问题

    详解Vue中CSS样式穿透问题

    这篇文章主要介绍了VUE中CSS样式穿透问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 遇到vue前端npm i报错多个版本不一致问题及解决

    遇到vue前端npm i报错多个版本不一致问题及解决

    这篇文章主要介绍了遇到vue前端npm i报错多个版本不一致问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中使用iconfont图标的过程

    vue中使用iconfont图标的过程

    这篇文章主要介绍了vue中使用iconfont图标的过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 浅析vue3响应式数据与watch属性

    浅析vue3响应式数据与watch属性

    这篇文章主要介绍了vue3响应式数据与watch属性的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • 在vue中通过axios异步使用echarts的方法

    在vue中通过axios异步使用echarts的方法

    本篇文章主要介绍了在vue中通过axios异步使用echarts的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论