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中使用mockjs代码实例

    在Vue中使用mockjs代码实例

    这篇文章主要介绍了在Vue中使用mockjs代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • VUE的数据代理与事件详解

    VUE的数据代理与事件详解

    这篇文章主要为大家介绍了VUE的数据代理与事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue3将虚拟节点渲染到网页初次渲染详解

    Vue3将虚拟节点渲染到网页初次渲染详解

    这篇文章主要为大家介绍了Vue3将虚拟节点渲染到网页初次渲染详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue中axios的封装(报错、鉴权、跳转、拦截、提示)

    Vue中axios的封装(报错、鉴权、跳转、拦截、提示)

    这篇文章主要介绍了Vue中axios的封装(报错、鉴权、跳转、拦截、提示),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue中setup语法糖写法实例

    vue中setup语法糖写法实例

    如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup语法糖的相关资料,需要的朋友可以参考下
    2022-12-12
  • Vue中动画与过渡的使用教程

    Vue中动画与过渡的使用教程

    最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue+elementui(对话框中form表单的reset问题)

    vue+elementui(对话框中form表单的reset问题)

    这篇文章主要介绍了vue+elementui(对话框中form表单的reset问题),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 解读Vue实例的属性及模板渲染

    解读Vue实例的属性及模板渲染

    这篇文章主要介绍了解读Vue实例的属性及模板渲染问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue-cli脚手架搭建方式(vue脚手架方式搭建)

    vue-cli脚手架搭建方式(vue脚手架方式搭建)

    这篇文章主要介绍了vue-cli(vue脚手架方式搭建),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • unplugin-auto-import与unplugin-vue-components安装问题解析

    unplugin-auto-import与unplugin-vue-components安装问题解析

    这篇文章主要为大家介绍了unplugin-auto-import与unplugin-vue-components问题解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02

最新评论