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中el-select中多选回显数据后没法重新选择和更改的解决

    vue中el-select中多选回显数据后没法重新选择和更改的解决

    本文主要介绍了vue中el-select中多选回显数据后没法重新选择和更改解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • 详解elementui之el-image-viewer(图片查看器)

    详解elementui之el-image-viewer(图片查看器)

    这篇文章主要介绍了详解elementui之el-image-viewer(图片查看器),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 在Vue中使用Echarts可视化库的完整步骤记录

    在Vue中使用Echarts可视化库的完整步骤记录

    这篇文章主要给大家介绍了关于在Vue中使用Echarts可视化库的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue3+Vite+Nginx部署后刷新404白屏问题的完整排查指南

    Vue3+Vite+Nginx部署后刷新404白屏问题的完整排查指南

    文章详细介绍了Vue单页应用(SPA)首次进入页面正常,一刷新就白屏或404的两种情况及其背后的原因,文章还提供了完整的修复步骤,包括修改Vite打包配置、检查Nginx配置、重新构建并部署等,需要的朋友可以参考下
    2026-03-03
  • vue.js element-ui validate中代码不执行问题解决方法

    vue.js element-ui validate中代码不执行问题解决方法

    这篇文章主要介绍了vue.js element-ui validate中代码不执行问题解决方法,需要的朋友可以参考下
    2017-12-12
  • 详解Vue中$refs和$nextTick的使用方法

    详解Vue中$refs和$nextTick的使用方法

    这篇文章主要为大家介绍了Vue中$refs和$nextTick的使用方法,文中的示例代码讲解详细,对我们学习Vue有一定帮助,需要的可以参考一下
    2022-03-03
  • 深入解析Vue的自定义指令

    深入解析Vue的自定义指令

    这篇文章主要介绍了深入解析Vue的自定义指令,自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑,一个自定义指令由一个包含类似组件生命周期钩子的对象来定义,需要的朋友可以参考下
    2023-05-05
  • vue proxyTable的跨域中pathRewrite配置方式

    vue proxyTable的跨域中pathRewrite配置方式

    这篇文章主要介绍了vue proxyTable的跨域中pathRewrite配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 学习 Vue.js 遇到的那些坑

    学习 Vue.js 遇到的那些坑

    这篇文章主要介绍了学习 Vue.js 遇到的那些坑,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-02-02
  • Vue中tinymce富文本功能配置详解

    Vue中tinymce富文本功能配置详解

    TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器,跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费,本文小编给大家详细介绍了Vue中tinymce富文本功能配置,需要的朋友可以参考下
    2023-11-11

最新评论