Vue的iview组件框架select远程搜索,选中后不刷新的问题
1、场景:弹框内有一个下拉组件(支持搜索),当选择完数据后弹框关闭,再次打开后,下拉框内的数据是刚才选中的数据。
原因:分析后觉得是搜索内容没有清空,导致下拉的数据只有一个
2、解决方案
a 、解决:调用下setQuery方法,伪代码如下:
<select ref="select">
<option>1</option>
<option>2</option>
</select>
this.$refs.select.setQuery(null)
每次代开弹框后,下拉数据是全部了
b、UI框架采用了iview,用的select组件的自动补全功能,也就是select组件的远程搜索功能
问题描述:第一次输入查询关键字,匹配到一条数据,选中后,再次输入查询关键字,如果和上次匹配到的条数length相同,选中时候结果发现匹配到的结果还是上一条的,并没有刷新。
解决过程:很是郁闷。断断续续弄了一周,猜想各种可能性,还在项目里的node_modules文件夹iview的源码里写console,但是都没有输出任何信息,打的断点也不起作用,我一直以为是无法调试,困扰了许久,偶然间,居然发现在浏览器里是可以调试的,

原来藏在这里,被自己蠢哭了!!!
可以调试后,找问题就简单了许多,这次最大的收获就是发现了怎么调试node_modules下模块的代码。
看了源码,发现只有在this.$on("append"),this.$on("remove")的时候才会触发下拉列表的刷新。所以当根据关键字查询获得的下拉列表条数和上次的相等时候,常常会不刷新。
所以我手动在每次请求后端数据之前,先将select的list置为空。
Vue的iview组件框架select远程搜索,选中后不刷新的问题的更多相关文章
- iView中Tree组件children中动态checked选中后取消勾选再选中无效问题
如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...
- select 如何在选中后获取选中的时是什么元素 ,(原生js)
在日常开发中,我们经常遇到选择框的业务处理:如何去获取我们所选中的数据呢? 很多小伙伴还不是很熟悉! <!DOCTYPE html> <html lang="en" ...
- VUE常用UI组件插件及框架
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
- Vue 2.0 组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要
像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- vue项目引用 iView 组件——全局安装与按需加载
框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库.使用方法官网很详细. 官网:https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安 ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
随机推荐
- Vue的H5页面唤起支付宝支付
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...
- Android中的消息处理机制
安卓中的消息处理机制主要涉及到5个概念 (1)消息类:Message,可以理解成一个数据单元: (2)消息队列类:Message Queue,存放通过Hander发布的消息,处理顺序类似于队列,按照先 ...
- 正则表达式[\w]+,\w+,[\w+]
正则表达式[\w]+,\w+,[\w+] 三者区别? [],[ABC]+,[\w./-]+ 表达什么? 正则表达式[\w]+,\w+,[\w+] 三者有何区别:[\w]+和\w+没有区别,都是匹配数字 ...
- python高级应用
一:错误和异常 1.python错误和异常 语法错误:Python的语法错误或者解析错. 异常:运行时检测到的错误被称为异常. 2.异常处理 Python中使用try except 语句来捕获并处理异 ...
- mybatis插入嵌套对象
今晚做项目遇上了一个需求,需要插入嵌套对象. 对象结构是这样的: public class RegisterMsg{ private Header header; private short pro ...
- python3练习100题——050
题目:输出一个随机数. 程序分析:使用 random 模块. import random print( random.randint(1,10) ) # 产生 1 到 10 的一个整数型随机数 pri ...
- LaTeX技巧008:如何给文字添加阴影效果?
大家可以使用这个包:shadowtext宏包
- LaTeX技巧012:LaTeX 插图加载宏包
LaTeX 插图加载宏包.支持 LaTeX - DVIPDFMx; pdfLaTeX; XeLaTeX 三种编译方式,支持 eps/pdf/jpg/png 等图片格式. % Put this snip ...
- SQL语句中count(1)count(*)count(字段)用法的区别(转)
SQL语句中count(1)count(*)count(字段)用法的区别 在SQL语句中count函数是最常用的函数之一,count函数是用来统计表中记录数的一个函数, 一. count(1)和cou ...
- Linux修复日志
阿里云后台系统报告漏洞,解决记录 中级: RHSA-2019:0049-重要: systemd 安全更新