el-select中绑定数组对象

最新推荐文章于 2024-01-23 13:20:43 发布
最新推荐文章于 2024-01-23 13:20:43 发布
阅读量2.4k 收藏 1
点赞数 4
分类专栏： elementui 文章标签： javascript java 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ju__ju/article/details/129520514
版权

如图,选中考试范围时,v-model绑定的值是一个数组,但是api接口需要的数据结构是

scheduleScopeList: [{ id: "1635461443790221314" },{ id: "1635461443790227970" }]

这种,即需要绑定一个数组对象

解决思路

首先绑定value-key="id",然后:value="{ id: obj.id }"即可

橘哥哥
关注
专栏目录
vue2踩坑记录：el-select如何绑定对象
l_q_l的专栏
08-30 860
所以，需要你告诉它，通过哪个键值来判断你选中的这个对象跟上一个选中项之间是否发生了变化，所以，其值与el-option中的Key保持一致即可。所以不能只绑定用户Id，需要绑定整个item(用户对象)，这样每次change事件所获取到的newValue是整个对象，而且v-model中的变量指向的也是整个对象，方便后续操作。但是绑定对象后，无法正确响应，点击第一个选项时，页面显示选中的是第一个人，但是后台data是正确的。原来，这时必须添加value-key属性，作为 value 唯一标识的键名。
el-select 绑定对象obj + 传入参数(如：index下标等）
Shimeng_1989的博客
09-23 2130
el-select 绑定对象obj + 传入参数(如：index下标等）
element中el-select多选v-model是对象数组
小马甲
12-09 2170
`element`中的`el-select`的`v-model`一般都是字符串或者字符串数组，但是有些时候后端接口要求该字段要传对象或者对象数组，如果再转换一次数据，对于保存配置和回显都是吃力不讨好的事情。把`el-option`的`value`改成`item`，结果发现竟然会报错 children must be keyed:
el-select绑定对象
qq_43506776的博客
01-05 1391
el-select绑定对象
Vue+ElementUI el-select选择器：绑定的值为对象
weixin_52950296的博客
11-08 9009
Vue+ElementUI el-select绑定值为对象
element中el-select 绑定对象
pingfanblog
06-13 3380
前端支持利用选择框来支持修改。
Element-UI el-select 绑定对象
热门推荐
03-28 1万+
Elment-UI版本：2.15.7 由于官方文档不够详细，在使用el-select组件传入对象时，不是取值有问题，就是会报错，多番尝试后，找到了解决方法，特此记录。 <template> <el-select :value="obj" value-key="label" placeholder="请选择" @change="changeSelect"> <el-option v-for="(item,index) in arr" :key="item.labe
关于解决elementUI组件el-checkbox-group无法绑定对象数组的问题
ColinTChen的博客
10-28 6558
关于解决elementUI组件el-checkbox-group无法绑定对象数组的问题1.把 element 源码克隆到本地2.安装依赖3.查找文件4.替换代码5.重新打包 1.把 element 源码克隆到本地 git clone https://github.com/ElemeFE/element.git 或者下 zip 包 https://github.com/ElemeFE/element 2.安装依赖 npm install 或 cnpm install 3.查找文件 文件目录：packages\
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
通过watch监听器来监控el-select绑定的值，当用户尝试删除一个不允许删除的选项时，通过监听函数将之前删除的选项重新添加到选中值中。虽然这种方法能够实现功能，但在界面上会存在误导用户的情况，因为在不允许...
详解element-ui中el-select的默认选择项问题
10-16
在示例代码中，`el-option`通过`v-for`循环遍历`options`数组，每个选项的`value`和`label`分别对应于数据对象的`value`属性和`label`属性。 `v-model`是Vue.js的核心特性，用于双向数据绑定。在`el-select`中，`v-...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
这里的`options` 是一个包含多个选项的对象数组，每个对象包含`label`（显示的文本）和`value`（选中时绑定的值）。 为了自定义`el-select` 下拉框标签，我们可以根据业务需求动态生成`options` 数组。假设我们有...
eleui下el-select组件的绑定对象使用
最新发布
qq_44813770的博客
01-23 1071
内容：关于使用el-select组件绑定一个对象的操作。使用技术：element ui -vue2。
关于ElementUI el-select 绑定对象的探索
qq_35430000的博客
12-11 2734
为了简单，直接引用ElementUI官网的例子，当需要绑定一个对象的时候直接给el-option的value属性设置为遍历集合的一个对象如下： <template> <el-select v-model="value3" disabled placeholder="请选择"> <el-option v-for="item in options"...
el-select 绑定对象类型的值,以及进行数据的回显
weixin_45666406的博客
06-12 1879
el-select绑定对象类型的值，以及数据回显
el-select绑定值为一个对象element UI
weixin_45654407的博客
08-21 2270
重点： el-select绑定item的唯一值，一般是个id， value-key=“id” 2.el-option的value绑定item, :value=“item” 3.在el-select的change事件获取对象的值并且赋值到对应的键。 4.nameSpare为备用关联字段，不影响。 <el-select value-key="nameId" style="width:200px;margin-bottom:10px;"
el-select 绑定对象和el-checkbox-group用法
qq_25313187的博客
08-04 3288
el-select,el-checkbox-group
element el-select 单选或多选时，需要绑定对象解决方法
weixin_59423799的博客
08-10 1310
element el-select 单选或多选时，需要绑定对象解决方法。
el-autocomplete绑定对象数组
07-14
对于el-autocomplete，你可以通过v-model绑定一个对象数组，以实现自动完成的功能。首先，你需要设置一个对象数组，其中每个对象包含一个value属性，用于存储选项的值。然后，将v-model绑定到一个选项对象上，以便在用户进行选择时更新绑定的值。 下面是一个示例代码： ```html <template> <div> <el-autocomplete v-model="selectedOption" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" > <template slot-scope="{ item }"> <div class="item">{{ item.value }}</div> </template> </el-autocomplete> </div> </template> <script> export default { data() { return { selectedOption: null, options: [ { value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }, // ... ], }; }, methods: { querySearch(queryString, cb) { // 在这里你可以根据输入的内容进行筛选，返回匹配的选项数组 const results = queryString ? this.options.filter((option) => option.value.toLowerCase().includes(queryString.toLowerCase())) : this.options; cb(results); }, handleSelect(item) { // 处理选择项的逻辑 console.log('Selected:', item); }, }, }; </script> ``` 在上面的示例中，`selectedOption`就是绑定的对象数组中的选项。`options`是所有可选的选项数组。`querySearch`方法用于根据输入的内容进行筛选，返回匹配的选项数组。`handleSelect`方法用于处理选择项的逻辑，你可以在其中执行你需要的操作。 希望以上信息对你有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值