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 唯一标识的键名,绑定值为对象类型时必填
<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中多选回显数据后没法重新选择和更改解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
详解elementui之el-image-viewer(图片查看器)
这篇文章主要介绍了详解elementui之el-image-viewer(图片查看器),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-08-08
Vue3+Vite+Nginx部署后刷新404白屏问题的完整排查指南
文章详细介绍了Vue单页应用(SPA)首次进入页面正常,一刷新就白屏或404的两种情况及其背后的原因,文章还提供了完整的修复步骤,包括修改Vite打包配置、检查Nginx配置、重新构建并部署等,需要的朋友可以参考下2026-03-03
vue.js element-ui validate中代码不执行问题解决方法
这篇文章主要介绍了vue.js element-ui validate中代码不执行问题解决方法,需要的朋友可以参考下2017-12-12
vue proxyTable的跨域中pathRewrite配置方式
这篇文章主要介绍了vue proxyTable的跨域中pathRewrite配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04


最新评论