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

9月前作者：楚楚梦厦分类：Toy博客阅读(49) 违法举报

这篇具有很好参考价值的文章主要介绍了el-select获取当前选中的对象所有(item)数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

场景

在应用elementUI的el-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 唯一标识的键名，绑定值为对象类型时必填文章来源地址https://www.toymoban.com/news/detail-543872.html

<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)数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

el-select 多选框使用以及回显默认选中说明

改动点 el-select 添加属性 multiple， v-model= 绑定的必须是个数组，在data中定义好，回显的时候，后台传递数组有值就能显示多个选中的。后台遇到问题建议多看element官网文章，下拉框单选、多选、输入检索都有案例学习来源： el-select 多选框使用以及回显默认选中

2024年02月13日
浏览(42)
在vue里面，element ui，el-select表单选中校验失败

在element 表单中我们需要校验，当表单中有数据变动时，会触发检验。提示：这里描述项目中遇到的问题：在项目中，提交时下拉菜单没有选，会触发校验提示，去选中下拉菜单的数据，不会再次触发校验，导致校验提示文字依然存在一般来说遇到了校验失效问题，有值的

2024年02月12日
浏览(47)
Vue3 element-plus el-select 无法选中，又不报错

html 结构 js 代码点击下拉选项，输入框无法选中原因：ref=“conditionForm” 和 :model=“conditionForm” 冲突了， 4-1. 再Vue2里面 :model=“conditionForm” 绑定的是 conditionForm 变量， ref=“conditionForm” 绑定的是conditionForm字符串 v-model=“conditionForm.personnel” 绑定的 conditionForm 变量下属性

2023年04月27日
浏览(44)
解决element-ui中的el-select选择器无法显示选中内容的问题

问题描述：排查方法：检查数据控制台是否报错，无报错检查change是否触发，会触发最后开始百度，查看文档官方文档有这么一段话，就是属性一定要挂载到data上，不然无法检测。最后解决：排查到我的form表单，在定义表单属性的时候，没有在data中定义该字段。总结

2024年01月23日
浏览(52)
Vue+ElementUI el-select选择器：绑定的值为对象

业务需求： el-select选择器，后台接口需要的参数为name，name会存在重复情况，前端唯一标识选择用id，所以最后决定使用select绑定对象值将数据保存下来。实现思路：常规的select选择器，v-model 形式绑定的参数只能是boolean,string,number,但是仔细翻阅官方文档发现，selelct是可以

2024年02月14日
浏览(43)
el-select报错：vue.esm.js?5cd5:5105 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞；无法选中

目录一、问题二、原因及解决方法三、总结 Tips:嫌麻烦可以直接看总结中有颜色的字体即可！ 1. 使用element select控件时有警告(transition-group children must be keyed: ElTag)且无法选中下拉项 vue.esm.js?5cd5:5105 [Vue warn]: transition-group children must be keyed: ElTag found in --- TransitionGroup

2024年02月14日
浏览(44)
el-tree使用获取当前选中节点的父节点数据（开发记录）

官网上有两种办法：根据 data 或者 key 拿到 Tree 组件中的 node (data) 要获得 node 的 key 或者 data。我这key设置后没有生效，采用的node获取的方法 1、html部分 2、data举例 el-tree提供的回调事件：@node-click=“handleNodeClick”。（方法名自取，这里用的原来的“handleNodeClick”）其他：①

2024年02月11日
浏览(50)
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同

可以使用 jQuery 的子选择器（Child Selector）或 find() 方法来获取子元素。子选择器（Child Selector）：使用父元素的选择器和 \\\'\\\' 符号来选取该父元素的子元素。例如：选取 id 为 \\\'parent\\\' 的元素内所有 class 为 \\\'child\\\' 的直接子元素。 find() 方法：使用 jQuery 的 find() 方法来选取指定父

2024年02月08日
浏览(40)
el-select 使用

案例：

2024年02月10日
浏览(38)
修改el-select和el-input样式；修改element-plus的下拉框el-select样式

修改el-select样式 input如下 el-input clearable v-model=\\\"name\\\" placeholder=\\\"请输入\\\" class=\\\"input-with-select input_box\\\" style=\\\"width: 148px;margin: 0 40px;position: absolute;right:67px;\\\" /

2024年02月13日
浏览(48)