iview的select加filterable多点击几次数据会减少

已于 2023-06-16 16:24:09 修改
阅读量195 收藏 1
点赞数
文章标签： view design vue.js
于 2023-06-16 11:17:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41406727/article/details/131243205
版权
当使用Vue的filterable特性时，如果在change事件中观察到选中值前有空格，可能是因为选项标签(label)的设置。文章提到可以通过调整Option标签的属性，例如label和value的绑定，来避免空格的出现。这个问题涉及到前端开发中的数据绑定和事件处理。
摘要由CSDN通过智能技术生成

这个问题的产生应该是因为有空格，filterable选中值后，再点击change事件获取的值就是前面加了空格，可以写在label里面

<Option :label="item" :value="item" v-for="item in list" :key="item"
                                    >
                                </Option>

那是遇知吧
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview Select 组件 过滤功能 多项条件过滤
shenmeyaonie的博客
08-24 558
<Select v-model="formValidate.val" filterable clearable multiple placeholder="请输入" > <Option v-for="item in uData" :key="item.e...
iview使用select组件设置filter属性后导致获取值有空格问题
ljxbbss的博客
01-08 681
<form-item prop="cityId" label="所属城市"> ## @on-change="change" <i-select v-model="allEditParam.cityId" filterable :disabled=disabledData @on-change="cha...
iview的Select组件filterable
小划乐的博客
04-01 6762
<FormItem label="国家"> <Select v-model="country" ref="sel" filterable> <Option v-for="item of countryList" :value="item.name" :key="item.id" > {{item.name}} </Op...
iview中select使用filterable的问题
qq_43033251的博客
06-02 1438
iview,select,fiterable
iview select filterable属性使用下拉bug
OldStreet61的博客
01-11 5783
今天做项目时候在iview 原生自带的select中设置filterable，下拉时候可进行查询，但是发现选中载打开模态框每次都绑定上一次的值，解决方案就是在关闭弹框时候将this.$refs.select.setQuery(null)，解决问题。解决方案，来自于以下链接： 转自：https://www.cnblogs.com/victory820/p/10145485.html 1场景：弹框...
iview select filterable属性使用小陷井
素钗一生推
09-06 1万+
开了一个内容管理系统，使用了webpack vue 构建了一个iview项目，在列表当中使用新增，编辑弹窗时，有碰到一个使用select控件（select 设置了filterable属性），在编辑赋值之后，修改，保存之后，去新建，由于在编辑那一步有重新修改值，导致 select 的 query不为空，最终导致新建弹出的下拉选择项只有前一次操作选中的项，上个图，看看 编辑选择的结果： 再次新...
vue中Select支持模糊搜索 （ iview ）
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
12-18 1169
<Form-item label="厂商名称" prop='vendor_id'> <Select v-model="formRight['vendor_id']" :transfer="true" filterable multiple> <Option v-for="(item, index) in vendors" :value="item.id" :key="index"> {{item...
iview select选中值取值_iView的Select选择框
weixin_39922147的博客
12-20 3041
目录在此先列出解决了那些问题，以防读者看完了没有用处：1、示例，最基础的使用方法2、传参，传多个值的方式3、默认值4、清空重置无效5、可搜索的用法及如何限制搜索字符长度一、示例html:{{item.name}}js:data: {formSend: {name: '',code: ''},dataList: [{id: 1,name: '中国',code: 'china'}]},methods:...
vue + iview select 远程搜索可以按多个参数查询
shenmeyaonie的博客
10-28 873
html: <Select v-model="model13" filterable :remote-method="remoteMethod1" :loading="loading1" style="width: 200px" > <Option v-for="(option, index) in
iview select多选远程搜索，不清空关键字
renamayu的专栏
04-13 1198
<template> <Row> <Col span="12"> <Select ref="selectName" v-model="model14" multiple filterable remote :remote-method="remoteMethod2" :loading="loading2" @on-change="onChange" @on-query-change="handleSelectChange"> <O.
iview、filterable、reset之后变成筛选状态的问题
stucker的博客
07-12 301
问题是这样的： select需求需要使用filterable实现可筛选，但是使用iview的resetFields之后，发现v-modal所绑定的值变成了undefined，并非初始化的formItem值。 这就导致问题出现，我选择值之后，重置，下拉框只剩我之前选中的option，虽然框中的值清空了，但是触发了筛选，筛选的值就是我上一次选中的值。开始解决： 先说我的问题是怎么解决的：将:key 的值与option中label的值保持一致为item.name
vxe-table 筛选渲染filter-render 自定义组件
wanghanlu_的博客
05-26 4620
3.1在main.js文字中导入vxetableRenderer.js文件。1.创建vxetableRenderer.js文件。2.创建filterModal.vue文件。3.2在你的列配置中使用。
vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl
最新发布
weixin_44867717的博客
09-06 2670
【代码】vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl。
Iview Select filterable搜索“无匹配数据”一直显示,Iview Select filterable远程搜索“无匹配数据”显示异常
天渺(喵)工作室
05-27 1420
拓展https://blog.csdn.net/weixin_44132981/article/details/102607979?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242 说实话，Iview UI真的挺坑的,官方文档什么都没说,当Iview UI中Select 加了filterable属性,在加了remote和:remote-method.
IVIEW中的Select下拉框搜索时没有匹配项时失去焦点清空input框（记得加ref清空input框数据，因为清空v-model无法彻底清空，这是iview中的一个小bug）...
dianlupeng4187的博客
07-23 2093
<Select ref="vendorId" v-model="formInline.vendorId" @on-open-change="venSelect" filterable style="width: 162px;" clearable> <Option v-for="item in vendorList" :value="item....
iview filterable在搜索时，只按照 label 进行搜索
weixin_43845550的博客
02-24 931
<Select v-model="deptId" filterable :only-filter-with-text="true"// //用来控制是否启用自定义的originValidateOption函数。true代表启用 clearable > <Option .
Element-ui的el-select 选择器，filterable-可输入文字进行筛选功能快速查找选项，clearable-可以清空当前选择项
热门推荐
栖身星河之中
02-28 2万+
为 el-select 添加 filterable 属性即可启用筛选功能。 默认情况下，Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。 //官方代码： <template> <el-select v-model="value" filterable placeholder="Selec
iview select 远程搜索,选择选项后,失焦搜索框内容被清空
晨曦的博客
09-05 1367
我怀疑select 多次执行chang事情,可以使用计时器延迟尝试一下,但我没去深究,使用了另一种方法。
vxe-table表格中使用vxe-select选择器遇到的问题
Amtion的博客
12-12 4557
vxe-table表格中使用vxe-select选择器遇到的问题，编辑最后一行时选择弹框会撑开表格，使用体验比较差，要往上滚动或者有时候根本选择不到选项。
iview select onchange走2次
06-02
可能是因为在iview select的on-change事件中绑定了多次函数导致的。你可以检查一下代码中是否重复绑定了on-change事件。另外，也有可能是因为iview select的默认行为和你自己的逻辑都会导致on-change事件被触发两次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值