iview select数据重置问题

最新推荐文章于 2023-06-29 10:08:48 发布
最新推荐文章于 2023-06-29 10:08:48 发布
阅读量473 收藏
点赞数
分类专栏： iView 文章标签： view design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiazzww/article/details/127908211
版权

当iview select 的option是循环出来的就有可能遇到这种问题，当我们更改option循环的数组数据时候，select会自动触发一次on-change事件，且回调为undefied（即为selecte绑定的数据v-model为undefined），同时碰到的场景就是：同时会调用两次事件，且最后一次事件回调是udefined

解决办法：在on-change事件里判断，如果回调是undefined时  return,跳出函数，并且重新给select绑定的变量赋值

xiazzww
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iview-resetFields()重置
qq_39736671的博客
03-10 3216
iview-resetFields重置一.自己的方式二.组件提供的方式 最近在使用iview编写form表单的时候，由于对官方组件没读太多，直接上手，就按照自己的方式实现按钮reset重置事件，今天发现有现成的事件，起始都是大同小异。 自己的方式 组件提供的方式 一.自己的方式 闲话不说直接上案例 1.表单数据 <Form :model="vehicle" :label-wid...
iview select选中值取值_完美解决iview 的select下拉框选项错位的问题
weixin_39922868的博客
12-20 513
在使用iview的过程中，我遇到这样一个问题，在Model中使用select下拉框组件。但是当弹出框超过一屏需要滚动时，select的下拉选项会出现错位(下图1为正常，图2为滚动后，下拉选项错位。)图1：图2：在分析组件代码后，发现以下一个样式：.ivu-modal .ivu-select-dropdown {position: absolute !important;}解决方案正是这个样式影响了...
iview select 怎么清空_iView各种组件清空重置
weixin_39647787的博客
12-22 667
表单注意事项： prop属性要和表单对象中的属性名一致html:重置js:data () {return {formFilter: {},}},methods: {handleReset (name) {// 或者手动将各个属性置空this.$refs[name].resetFields()}}穿梭框html: 首先通过ref获取到穿梭框ref="refTransfer">js: 在想要清除...
iview 表格重置 以及 选择器重置 以及 输入框重置
xiaoxin6661111的博客
08-08 462
iview 表格重置 以及 选择器重置 以及 输入框重置
iview select 怎么清空_在使用iview时发现要先重置一下表单然后填写完后再重置可以清空Select多选框，否则清不掉，什么原因？...
weixin_39963830的博客
12-22 368
在使用iview时发现要先重置一下表单然后填写完后再重置可以清空Select多选框，否则清不掉html代码北京市上海市深圳市提交重置js代码export default {data () {return {formValidate: {name: '',city: []},ruleValidate: {name: [{ required: true, message: '姓名不能为空', trig...
iview切换Select时选项丢失，重置Seletc时选项丢失
yjl13598765406的博客
06-29 577
iview切换Select时选项丢失，重置Seletc时选项丢失
iviewSelect.zip
08-23
vue2.0 结合iview组件实现五级联动,点击上级给下级赋值利用@on-select取到所点击的下标再与数组里的Id进行匹配
iview实现select tree树形下拉框的示例代码
10-17
主要介绍了iview实现select tree树形下拉框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
完美解决iview 的select下拉框选项错位的问题
08-27
下面小编就为大家分享一篇完美解决iview 的select下拉框选项错位的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iview中Select 选择器多选校验方法
01-19
iview提供的select组件中使用multiple属性可以开启多选模式,返回的数据也是数组的形式。 iview使用的校验是根据async-validator来实现数据验证。验证规则可前去查看开源项目 多选模式下的select组件校验使用type为...
iview-select-tree:基于iview进行二次开发的级联树状选择组件，支持无限级，单选，多选，搜索，表单验证（注：使用前先约会iview，否则无法使用）
03-26
iview选择树基于iview进行二次开发的级联树状选择组件，支持无限级，单选，多选，搜索，表单验证（注：使用前先约会iview，否则无法使用）安装npm install iview - tree - select -- save♡ import selectTree from ...
iview框架form表单无法重置
weixin_42332641的博客
07-14 523
组件的model属性必须与表单组件的v-model属性的绑定对象一致 <Form :model="formItem" ref="formItem"> <FormItem label="交易类型:" :label-width="74" prop="payType"> <Select v-model="formItem.payType" placeholder="请选择交易类型"> <Option v-for="item
iview怎么重置form表单
范天缘的博客
09-06 1009
官方提供了一个api resetFields 对整个表单进行重置，将所有字段值重置为空并移除校验结果 cancelAdd的方法带的参数是你的ref名字 <Modal @on-cancel="cancelAdd('addMainValidate')"> <Form :model="mainForm" ref="addMainValidate" > <FormItem prop="contractNumber"> <Input
iview的Select选择器清空选择项操作
leilei__66的博客
01-04 4161
iview的Select选择器清空选择项操作 一、iview组件的自带的清空操作 二、自制input代替原input输入框 自制input代替原input输入框，实现删除输入随意
iview Select 数据不及时刷新问题
nikeit的博客
06-20 3968
<FormItem label="客户" prop="custname"> <Select v-model="formData.custname" :remote-method="getRemoteCustomer" ...
iview select 使用了多选multiple @on-change 方法会自动触发
不积跬步何以至千里
10-21 3846
今天也是神奇 遇到一个打着灯笼也找不到的bug 因为我是添加编辑共用同一个弹出框 然后今天做编辑的时候 发现 明明region后端字段获取到了 但页面鬼斧神差的不显示 如下图 console.log都打印出来东西 就是不上页面 value的值也是对的 然后就很无奈 能怎么办 这时候就查找整个页面里 有存储区域的字段 发现有个地方我把他清空了 我把这句话屏蔽 居然又显示了 但 这是on-ch...
iview的select组件实现联动问题解决
yoohoo1234的博客
11-15 4538
遇到的问题： 1、下拉框选项中我分明选择的是戏曲2学院，结果在显示框中显示的是电影2学院 原因是因为select的option在遍历的时候，与上个遍历的list的key值一样导致的，使key一直保持唯一就好 2、联动的时候，第一个select的值变动的时候，第二个select的选项默认选中上次选中的位置 如上图，所属学校变化的时候，所属院系的值为空，当打开下拉框的时候发现，第二个值...
iview组件i-select一个坑,多个select切换后，选项没有了，并且页面也没有更新，解决方法
qq_35189120的博客
01-16 9540
在使用vue的数据为数组的时候容易遇到死循环以及不自动更新的情况，我们都知道数组是引用赋值。只要改变一个就会改变原数组，让后vue会根据数据的变动重新刷新页面，重新绑定数据，但是有时候却不重新绑定，我遇到的主要有两个。 1.数据缓存，这种很好解决官方也说明了vue采用虚拟节点，数据没有发生变化是不会更新，如果一定要更新可以给元素加key属性 ：key=&quot;uniqueId&quot; 2.我在使用selec...
vue的iview框架select组件远程搜索，选中后不刷新的问题
u011558902的专栏
07-31 7406
UI框架采用了iview，用的select组件的自动补全功能，也就是select组件的远程搜索功能 问题描述：第一次输入查询关键字，匹配到一条数据，选中后，再次输入查询关键字，如果和上次匹配到的条数length相同，选中时候结果发现匹配到的结果还是上一条的，并没有刷新。 解决过程：很是郁闷。断断续续弄了一周，猜想各种可能性，还在项目里的node_modules文件夹iview的源码里写cons...
iview select下拉框错位
最新发布
09-04
iview select下拉框错位可能是由以下几个原因引起的： 1. CSS样式问题：iview select组件使用了一些CSS样式来控制下拉框的位置，如果其他自定义的CSS样式与之冲突，可能会导致下拉框错位。可以通过检查页面中的CSS样式，特别是与select相关的样式，来解决该问题。 2. 容器宽度过小：如果iview select组件所在的容器宽度设置不够大，无法容纳下拉框的全部内容，可能会导致下拉框错位。可以尝试调整容器的宽度或使用CSS中的white-space属性来解决该问题。 3. 数据项过多：如果下拉框中的选项较多，iview select组件会自动将下拉框显示在页面可视区域内。但如果页面高度不够大，可能会导致下拉框错位。可以尝试减少下拉框的选项数量或调整页面布局以适应更多的选项。 4. 版本兼容性问题：iview select组件的某些版本可能存在bug，导致下拉框错位。可以尝试更新或降级iview的版本，或者查阅iview的官方文档或论坛，寻求解决该问题的具体方法。 总之，iview select下拉框错位可能是由CSS样式问题、容器宽度、数据项数量或版本兼容性等多种原因造成的。通过调整相关的设置或代码，可以解决该问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值