element多选select

最新推荐文章于 2023-01-20 09:30:00 发布
最新推荐文章于 2023-01-20 09:30:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： elementUI 文章标签： element多选select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45283768/article/details/97639417
版权

element的select具有多选属性，当加上这属性时，那么v-model绑定的数据会变成一个数组，数组里的每条对象是选择的下拉框选项。
本来挺正常的，但是呢后端需要的字段类型是字符串，那么提交时就要做重组，下拉框的value绑定的是对象，那么v-model绑定的数组中每个对象都有两个字段nama/code,需要将数组进行遍历取出每个对象的name和code，再分别用顿号连接并存进两个临时变量，再将临时变量作为提交对象的两个新增属性的属性值(这不是重点)。
看似没有问题，然而一运行就会报错
1.arr.some is not a function
2.下拉框只响应第一次修改
在这里插入图片描述
报错1是因为element下拉框组件对象为数组，不能直接改变其类型，否则其内部组件的封装方法会报错，则只能在将绑定对象赋值操作后才能做数据重组
报错2是因为vue不能监听动态属性的添加修改删除，所以界面不会响应，但其实value是发生了变化得，则用vue.$set代替Object.xxx的方式设置/修改属性

一头浓密的黑发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element ui select多选组件 重构
05-03
element ui select多选组件 标签根据数据属性显示颜色不同, 至于plugins
解决option标签selected="selected"属性失效的问题
08-28
下面小编就为大家带来一篇解决option标签selected="selected"属性失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望对大家有所帮助
Vue+elementUi获取el-select的值 将el-select 选中的多个值转成一个list提交到后台。
weixin_43208652的博客
11-01 6577
开发中遇到需要将elementUi的el-select 选择器选中的多个值转成 list提交到后台走了一些弯路下面说一下思路。 <el-form :model="form" :inline="true" :rules="rules" ref="roleForm"> <el-form-item label="分配角色" prop="typeId"> <el...
element ui中的select多选问题
weixin_46319117的博客
10-29 3620
在使用select下拉框多选时，在编辑用户角色时，编辑界面为select下拉框的model赋值了，选择的数据有问题，输入框中的值不能与下拉框的值对应上。
element UI中的table中使用多选select下拉菜单，默认全选后，无法修改select的值
JAVA求生之路——博主406766467
10-11 781
【代码】element UI中的table中使用多选select下拉菜单，默认全选后，无法修改select的值。
vue element select多选报错 arr.some is not a function原因及解决方法
sw_onload的博客
06-30 6827
用下拉选择框 使用multiple 属性 多选时出现报错 下面是还原当时的操作 其实只是一个小小的问题，就是绑定值的类型，应该是数组，我写成了对象,如下，改过来就不报错了
XXX.indexOf is not a function 问题
weixin_40453395的博客
04-13 3万+
鉴于网上关于indexOf is not a function解决方法都是jQuery解决方案，跟遇到问题不是一回事写下解决方案。 错误输出： 错误代码： 错误原因：reason2ndIds只有一个id例如100102时，不是字符串，无法使用字符串查找方法indexOf方法。 解决方法:把需要进行查找的字段强转成字符串，强转方法很多，用的是+""; 总结：indexOf为字符串使用方法，...
【vue报错解决】TypeError: i.indexOf is not a function
FTEzreal的博客
02-11 9107
前言：出现此类报错，问题一般都出现在数据类型上，比如： 1.字符串使用了数组的方法； 2.数据应定义为数组[]，却定义成了字符串 … so，优先检查数据类型的问题。 问题： vue+element 后台管理系统，切换搜索板块时，需要清空筛选条件重置数据 控制台报错如下： 解决： 经检查，问题出在vue双向绑定的数据类型上。 项目中有一个下拉筛选搜索框，之前为单选，data中初始值定义为空字符串’ '；后续需求变更为多选筛选，data中的初始值应定义为数组[ ]，而需求变更的时候忽略了这个问题，所以出现.
e.indexOf is not a function
若有所执，必有所成，心之所向，必显光芒
01-20 1856
引入jQuery文件，发现控制台报错 e.indexOf is not a function。
1：MUI选择器组件抛出“n.getSelectedItem is not a function”异常的解决办法 2：mui三级联动 3：移动端关闭虚拟键盘
runwuwushengxiyu的博客
08-02 303
1：MUI选择器组件抛出“n.getSelectedItem is not a function”异常的解决办法 2：mui三级联动 3：移动端关闭虚拟键盘
elementui select下拉框无法选值的解决办法
weixin_39152200的博客
12-16 1254
<el-select v-model="data" placeholder="请选择" @change="change"> <el-option v-for="(item, index) in 4" :key="index" :label="item" :value="item">{{ item}}</el-option> </el-select> change: function() { this.$forceUpdate() }
selectpicker is not a function（bootstrap-select无法动态加载数据）
小生测试的博客
06-07 1万+
现象： 使用了bootstrap-select插件，前端无法显示动态数据，查看元素又看到已经生成了数据，说明是渲染问题。 还提示： $(…).selectpicker is not a function 代码结构： js引用 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <scr
关于子组件调用时ESLint报错的TypeError: n.indexOf is not a function问题定位及解决
weixin_43996368的博客
05-24 1680
关于子组件调用时ESLint报错的TypeError: n.indexOf is not a function问题定位及解决 个人遇到的情况是这样的 ！！！ 1.在这个情况下，只引入了IsNormal单个组件时，整体的代码并没有报错，项目运行也没有问题 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e1dd4e4a0ea9451a8cdeec4617edc72c.png 2.在此基础上引入第二个组件NodeDetailList时，ESlint产生报错 3.从报错内容去看
... .indexOf is not a function at OnSelection
weixin_44145222的博客
12-02 642
使用vue + bulma + fontawesome 设计app 当在<i class="" ...>中加入@click监听时会出现报错：event.target.className ... .indexOf is not a function at OnSelection，在百度上不得答案，检查代码调试无数遍，花了一个多小时，最终锁定原因是方法没有被识别出来，js中没有任何方法被...
TypeError: this.getOptions is not a function 的解决
hyupeng1006的博客
01-06 1万+
React这个实际上就是 sass-loader 的版本过高或过低，与当前node版本不对应，不兼容 getOptions 函数方法，所以需要对 sass-loader 进行升级或降级处理。1、命令行卸载node-sass和sass-loader，重新安装跟你当前node版本对应的node-sass和sass-loader。2、或者可以删除node_modules文件夹，直接修改package.json里sass-loader和node-sass里的版本，然后npm install四、node。
vue.js中报错： TypeError: Cannot read property 'indexOf' of undefined
热门推荐
感恩、奋进、自信
07-25 10万+
[Vue warn]: Error when evaluating expression "name.indexOf('jack') >= 0": TypeError: Cannot read property 'indexOf' of undefined ypeError: Cannot read property 'indexOf' of undefined，从这句话中indexOf
select中的两个属性——selectedIndex、selectedOptions
m0_46730138的博客
11-25 3525
selectedIndex与selectedOptions 这两个属性是在onchange事件函数中被激发的属性，在select下的子节点中点击哪一个，就会被赋值哪一个 selectedIndex是点击后获得的下标 selectedOptions是点击后获得的HTMLCollection并且只有一个元素，因此要获得点击的option就需要selectedOptions[0] <body> <select name="" id="sel"> <op
多个el-select共用一个options且一个option只能用一次
chi1130的博客
10-21 3056
需求 一个表单多个下拉框，假如 options 里有中国，美国，第一个 select 选择里中国那么第二个 select 的 options 中国就置为灰色，反之我第二个选里中国，第一个 options 中中国就置为灰色 效果 DEMO 在线 demo ⛩⛽️????✈️???????????????? 代码 <template> <div> <el-form :model="rul...
element select多选
最新发布
09-06
Element Select的多选功能可以通过操作DOM来实现。在多选器框的DOM结构中，每个多选的tag都被包裹在一个标签中，这个标签包含两个元素，一个用于显示标签（标签），一个用于显示删除小叉的图标（标签）。因此，我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值