iview切换Select时选项丢失，重置Seletc时选项丢失

已于 2023-06-29 10:10:23 修改
阅读量591 收藏
点赞数
文章标签： view design
于 2023-06-29 10:08:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjl13598765406/article/details/131449940
版权

在这里插入图片描述

分析原因

在旧版本的iview中如果和filterable一起使用时，当值清空选项或者使用重置按钮清空时选项会丢失。

解决方式一

把去掉filterable

解决方式二

使用ref，调用clearSingleSelect()方法清空

ref="perfSelect"
this.$refs.perfSelect.clearSingleSelect()

在这里插入图片描述
在这里插入图片描述
参考连接：iview下拉框使用重置功能时option选项丢失

代码改变生活-120
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview中的Select选择器
weixin_45426989的博客
11-07 2335
iview中的Select选择器 在后台系统中使用Select是非常常见的，话不多说 <Select v-model="model2" size="small" style="width:100px" @on-change="xxxxxx"> <Option v-for="item in cityList" :value="item.value" :key="it...
关于view换页导致选择项丢失问题
qq_51486722的博客
10-18 387
在ivew组件中，选择某些数据换页然后再切换回去导致所选数据不存在的解决方法。 主要思路： 1、单选时使用ivew table组件中的row属性，将当前row数据存储到数组中（例：数组portTempList) onSelectChange(selection, row) { this.portTempList.push(row); }, 2、全选时，如果本页数据都未被选择portTempList为空，那么直接将数据存储到portTempList中，如果已经存在已选数据，...
iview组件i-select一个坑,多个select切换后，选项没有了，并且页面也没有更新，解决方法
qq_35189120的博客
01-16 9761
在使用vue的数据为数组的时候容易遇到死循环以及不自动更新的情况，我们都知道数组是引用赋值。只要改变一个就会改变原数组，让后vue会根据数据的变动重新刷新页面，重新绑定数据，但是有时候却不重新绑定，我遇到的主要有两个。 1.数据缓存，这种很好解决官方也说明了vue采用虚拟节点，数据没有发生变化是不会更新，如果一定要更新可以给元素加key属性 ：key=&quot;uniqueId&quot; 2.我在使用selec...
iView框架Select组件
weixin_45792464的博客
07-15 785
iView框架Select组件
【第6期】使用Iview的Select组件进行远程搜索并在编辑时设置一个或多个默认值
最新发布
朱晓龙的博客
01-03 1375
本期要点 1. Iview Select组件的简单介绍 2. 后端编写学校搜索接口 3. 前端编写调用搜索接口的相关方法 4. Select组件触发远程搜索 5. 编辑时对已选择的数据设置默认值(1个和多个)
完美解决iview 的select下拉框选项错位的问题
08-27
在使用iview的过程中，我们可能会遇到select下拉框选项错位的问题，当弹出框超过一屏需要滚动时，select的下拉选项会出现错位。这种问题的出现可能是由于iview组件的样式设置引起的。 在iview中，select下拉框组件...
iview实现select tree树形下拉框的示例代码
10-17
在前端开发中，IView UI 是一个流行的 Vue.js 组件库，它提供了许多美观且功能丰富的组件，如 Select Tree（树形下拉框），用于在下拉列表中展示层次结构的数据。Select Tree 结合了 Select 组件和 Tree 组件的功能...
iview中Select 选择器多选校验方法
08-27
iView 中 Select 选择器多选校验方法 iView 是一个基于 Vue.js 的高质量 UI 组件库，它提供了许多实用的组件来帮助开发者快速构建应用程序。其中，Select 选择器是一个非常常用的组件，它可以帮助用户从多个选项中...
iview中select的使用
zhixuexingchen的博客
09-02 2496
1、示例，最基础的使用方法 2、传参，传多个值的方式 3、默认值 4、清空重置无效 5、可搜索的用法及如何限制搜索字符长度 一、示例 html: <Select @on-change=“getItemValue” v-model=“formSend.code”> {{item.name}} js: data: { formSend: { name: ‘’, code: ‘’ }, d...
iview表格通过render放置Select下拉框，操作完成清空单选项
PhilsphyPrgram的博客
03-31 1450
select下拉框实现单选项清空
iview中最简单的TreeSelect组件的实现。iview中select组件和tree组件的结合
像鱼的博客
05-11 1657
Vue2中使用select组件和tree组件实现 TreeSelect功能
iview的select数字模糊查询功能实现
Super Livia
06-16 468
然后判断是否是数字类型!isNaN(parseFloat(querys)) && isFinite(querys)，还要就是要清除下空格。思路是这样， projectList是全部项目数据，projectListSearch是模糊查询的下拉数据。如果值为‘’，就清空v-model的值，并让模糊下拉数据等于全部数据即可。主要是on-query-change这个方法是监听搜索词的val值。
Iview下拉控件 Select 的值为数字类型的传值和校验
flyflyzhao8的博客
07-03 521
使用iview的下拉控件Select时，value默认为字符串类型，但是有时接口返回的option对应的value数据类型又是数字类型的，当选择某个option，再提交表单时会校验不通过。数据初始化v-bind时，引号内的内容会被当成表达式去解析，下图15选项对应的是字符串类型，20和25选项对应的是数字类型。在组件中的应用。Select 默认是 string 类型的，如果 value 是数字类型，验证就不通过，这时我们可以添加验证类型 type:'number'。
iview select 远程搜索,选择选项后,失焦搜索框内容被清空
晨曦的博客
09-05 1272
我怀疑select 多次执行chang事情,可以使用计时器延迟尝试一下,但我没去深究,使用了另一种方法。
iview中带搜索功能的select选择器
weixin_45195355的博客
12-08 797
iview中带搜索功能的select选择器
iview的Select选择器清空选择项操作
leilei__66的博客
01-04 4184
iview的Select选择器清空选择项操作 一、iview组件的自带的清空操作 二、自制input代替原input输入框 自制input代替原input输入框，实现删除输入随意
iview组件select远程搜索选择后失去焦点输入框清空问题/直接调用不显示问题解决
weixin_44167504的博客
07-09 5219
请看：代码倒数第三行 // 选择框过滤 remotedMethod(query) { if (query !== "") { const list = this.selGasStation.map(item => { return { value: item.Code, .
iview select下拉框可通过电话、卡号等远程搜索时，
shadow__jing的博客
06-15 312
对于住户下拉选择框，若需要通过电话、卡号、姓名等检索得到相应的选项时，我们的解决方案可以将住户的姓名、电话、卡号拼起来放在label中，这样就可以实现了。
关于iview select 绑定两个值的方法
weixin_43465508的博客
09-05 314
不绑定具体的值，而是去绑定索引值:value="index"，在获取值的时候可以这样获取options[index].value.因为v-model 只能绑定一个值。所以我们可以有以下思路。
iview render select
08-11
根据引用内容，和，在使用iview的render函数来实现select效果时，可以通过创建Select组件，并在render函数里面使用h函数进行渲染。在Select组件上可以设置props属性来绑定数据并设置transfer属性来控制其是否受表格...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值