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远程搜索,选中后不刷新的问题的更多相关文章

  1. iView中Tree组件children中动态checked选中后取消勾选再选中无效问题

    如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...

  2. select 如何在选中后获取选中的时是什么元素 ,(原生js)

    在日常开发中,我们经常遇到选择框的业务处理:如何去获取我们所选中的数据呢? 很多小伙伴还不是很熟悉! <!DOCTYPE html> <html lang="en" ...

  3. VUE常用UI组件插件及框架

    UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

  4. Vue 2.0 组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  5. 基于 Vue.js 之 iView UI 框架非工程化实践记要

    像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...

  6. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  7. vue项目引用 iView 组件——全局安装与按需加载

    框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库.使用方法官网很详细. 官网:https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安 ...

  8. 基于 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 时代,包括其插件在需要时就引 ...

  9. 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

    基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...

随机推荐

  1. GHO文件安装到Vmware的两种姿势

    1.使用 Ghost11.5.1.2269 将gho转换为vmdk文件(虚拟机硬盘),Vmware新建虚拟机自定义配置,然后添加已有的虚拟硬盘文件. 注意ghost的版本,如果你是用Ghost11.5 ...

  2. 获取http://XX.XX.XX.XX :XXXX/QuestionResult.aspx?method=接口返回值

    private string GetWeather(string strRegisterNo) { string getWeatherUrl = "http://XX.XX.XX.XX :X ...

  3. B-S 期权定价模型

    Black-Scholes 期权定价模型概述 1997年10月10日,第二十九届诺贝尔经济学奖授予了两位美国学者,哈佛商学院教授罗伯特·默顿(RoBert Merton)和斯坦福大学教授迈伦·斯克尔斯 ...

  4. javaweb利用javabean将数据库中内容遍历在页面输出

    效果如下图 它所实现的就是把数据库中一个表中所有的数据一条一条以表格的形式输出在网页上, 实现方法如下 首先我们要从数据库读取数据,这里要借助javabean来方便我们传递数据 以上面的为例,我要输出 ...

  5. 【Thread】java线程之对象锁、类锁、线程安全

    说明: 1.个人技术也不咋滴.也没在项目中写过线程,以下全是根据自己的理解写的.所以,仅供参考及希望指出不同的观点. 2.其实想把代码的github贴出来,但还是推荐在初学的您多亲自写一下,就没贴出来 ...

  6. 887. 求组合数 III(模板 卢卡斯定理)

    a,b都非常大,但是p较小 前边两种方法都会超时的  N^2 和NlongN  可以用卢卡斯定理  P*longN*longP     定义: 代码: import java.util.Scanner ...

  7. react 中 函数bind 和箭头函数

    用bind形式 方便测试,含有this时候最好用bind形 其他情况用箭头函数 含有this的时候也可以用箭头函数

  8. Wannafly Camp 2020 Day 2B 萨博的方程式 - 数位dp

    给定 \(n\) 个数 \(m_i\),求 \((x_1,x_2,...,x_n)\) 的个数,使得 \(x_1 \ xor\ x_2\ xor\ ...\ xor\ x_n = k\),且 \(0 ...

  9. BLE直接Data channel抓包方法汇总

    之前一致在做一些有关与BLE安全研究的“基础设施建设”工作,我们知道,在BLE进入跳频之后,所有的固定标志都会消失,但是是不是意味着没办法了?不是的.我会提出一些恢复出来的方法. 首先,前导码分析,B ...

  10. musql 单表查询

    一 介绍 本节内容: 查询语法 关键字的执行优先级 简单查询 单条件查询:WHERE 分组查询:GROUP BY HAVING 查询排序:ORDER BY 限制查询的记录数:LIMIT 使用聚合函数查 ...