elementUI select控件绑定多个值（对象）

最新推荐文章于 2024-05-29 19:07:18 发布
最新推荐文章于 2024-05-29 19:07:18 发布
阅读量1.5w 收藏 8
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A873054267/article/details/96286393
版权

通常使用的时候v-model都是绑定一个值，这样没有问题，但在某些需求中会获取选择项的多个值。

那么v-model就需要绑定一个对象，e饿了么的官网说明了绑定对象的时候必须绑定value-key值，否则会出现选择项无法改变的情况

。value-key可以使用选择项中的值。

当时没有看文档的时候，自己也想了一个办法，就是绑定选择项的索引值，然后到对应的nameList数组中取出对应的项也可以。

A873054267
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element Select选择器绑定对象，多选，回显处理
crazybai0001的博客
10-28 1万+
有些时候Select选择器需要多选、绑定对象，用户选择某项后（change事件），得到的值是一个对象，得到对象后可以获取对象的某些属性，以便做进一步处理，数据提交入库后，进行编辑操作，此时根据需求可能还需要正确定回显之前新建时选择的多个列表项，本文对些功能实现做简单整理、解释。
element中el-select多选v-model是对象数组
小马甲
12-09 1775
`element`中的`el-select`的`v-model`一般都是字符串或者字符串数组，但是有些时候后端接口要求该字段要传对象或者对象数组，如果再转换一次数据，对于保存配置和回显都是吃力不讨好的事情。把`el-option`的`value`改成`item`，结果发现竟然会报错 children must be keyed:
el-ment 下拉选择框key 绑定多个值
qq_16795789的博客
03-17 323
el-option。
【前端】vue+element项目中select下拉框label想要显示多个值多个字段
最新发布
No8g攻城狮的博客
05-29 767
vue+element项目中select下拉框label想要显示多个值多个字段。
vue 、 在element-ui的el-table组件中 使用 el-select绑定对象时value-key的注意事项
一撇一画的博客
08-04 1817
// 绑定对象时设置了value-key，再次点击时不会高亮,找了源码发现需要key需要一致； // 相关源码 isEqual(a, b) { if (!this.isObject) { return a === b; } else { const valueKey = this.select.valueKey; return getValueByPath(a, valueKey) === getValueByPath(b, valueKey); } } // ======
elementUI单选多选框动态绑定显示内容和绑定值
xiaoqingqing的博客
11-20 5449
elementUI单选多选框动态绑定显示内容和绑定值，挺简单的内容，总是不熟练，小小记录一下。 单选： <!-- 单选框 --> <el-radio-group v-model="regionType"> <el-radio v-for="item in regionTypes" :label="item.label" :key="item.label">{{item.text}}</el-radio>
Vue中select多选绑定对象数组
qq_37669585的博客
09-03 4773
实现需求，el-select多选框绑定由对象组成的数组 items格式要求[{obj},{obj}…] <el-form-item label="服务项目" prop="items"> <el-select v-model="form.items" @change="selectChangeChild" placeholder="请选择" multiple value-key="serviceItemId" &
elementUI el-select 选择对象 value-key属性
m0_63026408的博客
07-25 3311
今天遇到一个使用el-select的时候，需要获取值为对象，使用Select 组件的绑定值是一个数组，但是数组的值只能传入 Number 类型或者 String 类型的数据，如果我们想向其中传入一个对象就会出错。怎么办呢？我们可以发现是缺少一个索引，查看了elemnet-ui 的文档，可以看到 Select 组件有一个属性：value-key提示：以下是本篇文章正文内容，下面案例可供参考提示：这里对文章进行总结：注：value-key接收一个字符串 id 为唯一值 而不是 item.id。
elementUI select组件value值注意事项详解
01-19
select组件的使用方式就不细说，可查看select组件使用方式 主要要说一下注意事项： select组件可以动态生成...通用我们会循环一个数组、对象生成option选项 1.简单数组 const array1=[1,2,3] <el-option v-for
elementUI select组件默认选中效果实现的方法
10-17
在Element UI框架中，`el-select`组件是一个常用的下拉选择器，用于提供多个选项供用户选择。在某些场景下，比如编辑页面加载时，我们可能需要让`el-select`组件默认显示某个已经选中的选项。本文将详细介绍如何实现...
浅析Bootstrip的select控件绑定数据的问题
09-02
总结来说，解决Bootstrap select控件绑定数据的问题，需要掌握jQuery的基本操作，理解AJAX请求和JSON数据解析，以及熟悉Bootstrap的组件和插件API。正确使用这些工具，可以轻松地实现动态数据绑定，让网页更加生动和...
jq写的模拟elementui的select
05-07
`add_el_select(obj)`很可能是用来创建一个新的Select元素并绑定必要的事件监听器，以便实现类似ElementUI Select的交互。`obj`参数可能是一个包含配置项的对象，比如选项列表、默认选中值等。而`el_set_value(obj)`...
element ui checkbox-group多选框怎么选中id值
lilyheart的博客
09-01 4834
在项目开发中，使用多选框组，选中时想要取到该项的id而不是label值： checkbox-group：Element ui 中的组件，只需要在 Group 中使用v-model绑定Array类型的变量即可,并且绑定change实践，el-checkbox 的 label属性是该 checkbox 对应的值，所以只要label绑定id就可以了，显示的话使用label； 看代码 <el-checkbox-group v-model="checked" @change="test"> .
Element-ui使用Select多选框如何给value属性绑定对象类型
qq_40975831的博客
06-13 7340
如何给select多选下拉框的value属性绑定对象类型时怎么做 现在select标签处有一个value-key属性绑定值必须是为option标签中v-for遍历的数组中的元素(该元素值必须具有唯一性) 在option属性key处绑定值为数组中元素具有唯一性的元素 value-key处绑定值和key处绑定值必须要一样,否则可能会报错 [Vue warn]: <transition-...
element ui中Select 选择器，自定义显示内容
一个韩韩韩
11-11 4190
但是要想自定义选项内容，但是展示内容不是选项label的内容，可以在el-option标签内增加div进行自定义选项label展示，但选择后结果展示仍是el-option标签内label属性绑定的值。正常情况下，下拉框选项展示内容，就是选择后展示的label内容。
el-select 下拉框+复选框多选
qq_45300842的博客
08-29 3317
el-select 下拉框+复选框
elment-plus中el-select组件绑定对象踩坑
choorn的博客
05-07 1868
1、el-select绑定对象不仅要协商v-model，并且一定要加上value-key。不然选啥都不变，像个傻子一样；2、v-for中两种写法，一个是"item in list" 或者 "(item,index) in list"3、el-select中v-model绑定对象，则el-option中 :value也必须是对象。以上时可以正常执行的代码，其中row.way是一个对象。
elementUI 的多选框的选中
L_csdn123的博客
01-11 2237
要用elementUI组件写个多选框，要求 要有之前的默认选中，展示的是中文名字，实际传值的时候传的是英文的名字 <el-checkbox-group v-model="form.scopes" // el-checkbox-group上绑定的值就是默认选中的值，这个值有个要求他必须是普通的数组，不能是对象数组那种，他其实是把传的label值放到一个普通数组里，所以他必须和label的值的形式统一，要不然默认选中不会生效的！！！ @change="handleCheckChange"
【无标题】Js ＜el-option＞中的value绑定多个值
weixin_46801232的博客
10-19 1381
【无标题】Js 中的value绑定多个值
vue中select绑定多个值及回显
05-18
在Vue中，我们可以使用`v-model`指令来绑定select的选中值。如果要绑定多个值，可以使用一个数组来存储这些值。例如： ``` <template> <div> <select v-model="selectedValues" multiple> <option value="value1">Option 1</option> <option value="value2">Option 2</option> <option value="value3">Option 3</option> </select> <button @click="submit">Submit</button> </div> </template> <script> export default { data() { return { selectedValues: [] } }, methods: { submit() { console.log(this.selectedValues); // 打印选中的值 } } } </script> ``` 在上面的代码中，我们使用`multiple`属性来开启多选模式，并使用一个空数组`selectedValues`来存储选中的值。当用户选中或取消选中一个选项时，`selectedValues`数组会自动更新。在`submit`方法中，我们可以打印选中的值。 如果要回显已选中的值，只需要在`selectedValues`数组中初始化这些值即可。例如： ``` <template> <div> <select v-model="selectedValues" multiple> <option value="value1">Option 1</option> <option value="value2">Option 2</option> <option value="value3">Option 3</option> </select> <button @click="submit">Submit</button> </div> </template> <script> export default { data() { return { selectedValues: ['value1', 'value3'] } }, methods: { submit() { console.log(this.selectedValues); // 打印选中的值 } } } </script> ``` 在上面的代码中，我们将`selectedValues`数组初始化为`['value1', 'value3']`，这样在页面加载时就会回显这些选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值