iview的Select组件远程搜索的BUG优化--以及JS函数节流的应用

朴灿烈づ我的快乐病毒、 2021-09-17 02:56 1158阅读 0赞

iview的Select组件远程搜索的优化使用

业务场景：模糊搜索姓名，点击选择  
![在这里插入图片描述][2018112715221966.png]

template:
    <Select style='width:200px;margin-right:20px' @on-change='check' clearable filterable remote :remote-method='fuzzySearch' :loading="loading1" placeholder='请输入姓名'>
              <Option v-for="item in employeeList" :key="item.manageId" :value="item.manageId">{
       {item.manageName}}</Option>  </Select>
     js:
     //模糊查询
        fuzzySearch(keyword) {
        //利用函数节流可以大大减少没必要的多次请求
          clearTimeout(this.fuzzySearch.timer)
          //避免空格、选择之后再调一次接口（iview默认选择完成还会掉一次接口，浪费，必须干掉）
          if (keyword.trim() && this.employeeList.every(item => item.manageName !== keyword)) {
            this.fuzzySearch.timer = setTimeout(() => {
              this.loading1 = true;
              //请求接口
              this.api.get('dimission/findManage', { keyword }).then(res => {
                if (res.state === 200) {
                  this.loading1 = false
                  this.employeeList = res.data
                } else {
                  this.$Notice.error({ title: res.msg })
                }
              })
            }, 800)
          }
        },

[2018112715221966.png]: /images/20210813/8452fdc299f04114aaa68f91e9332688.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1158人围观）

还没有评论，来说两句吧...

相关阅读

相关 iview Select 组件创建项目问题

Select组件添加项目已经存在情况下还会增加重复的 ![在这里插入图片描述][20201027102705193.png_pic_center]) 这个回车的选项不会消

爱被打了一巴掌/ 2023年10月05日 12:16/ 0 赞/ 16 阅读

相关 js的函数防抖与函数节流

做了一个小例子，深入的了解函数节流与防抖的区别 <!DOCTYPE html> <html lang="en"> <head> <me

古城微笑少年丶/ 2023年06月21日 07:28/ 0 赞/ 32 阅读

相关 js 函数节流

函数节流 1概念：设定一个特定的时间,让函数在特定的时间内只执行一次,不会频繁执行· 2举例, fps游戏,威标按住不松手,子弹也不会适成一条线 3实现：定时器、

左手的ㄟ右手/ 2022年09月16日 04:56/ 0 赞/ 206 阅读

相关 JS函数节流

在前端开发中有一部分用户的行为会频繁的触发时间执行，而对于dom操作、资源加载等耗费性能的处理，很有可能导致界面卡顿，甚至浏览器的崩溃。函数节流就是预定一个函数只有在

刺骨的言语ヽ痛彻心扉/ 2022年05月23日 07:22/ 0 赞/ 247 阅读

相关基于 Vue.js 的 UI 组件库 iView

iView 详细介绍 iView 是一套基于 [Vue.js][] 的 UI 组件库，主要服务于 PC 界面的中后台产品。 ![iView][] 特性高质量、功

r囧r小猫/ 2022年05月18日 06:08/ 0 赞/ 342 阅读

相关 vue + iview + select + 本地搜索或远程搜索

案例 <template> <div>  <!-- filterable、remote、remote

我就是我/ 2022年05月16日 03:26/ 0 赞/ 322 阅读

相关 js中的函数节流

对于常见的场景，1、使用onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作，其

Love The Way You Lie/ 2022年05月15日 03:06/ 0 赞/ 263 阅读

相关 iview的Select组件远程搜索的BUG优化--以及JS函数节流的应用

iview的Select组件远程搜索的优化使用业务场景：模糊搜索姓名，点击选择 ![在这里插入图片描述][2018112715221966.png] temp

朴灿烈づ我的快乐病毒、/ 2021年09月17日 02:56/ 0 赞/ 1159 阅读

相关如何在iview中使用rander函数渲染Select组件和input组件

转自：http://blog.csdn.net/dead\_rabbit6\_0/article/details/79239206 仅用于学习，违者必究！！！

超、凢脫俗/ 2021年09月15日 00:40/ 0 赞/ 530 阅读

相关 iview的Select组件filterable

<FormItem label="国家"> <Select v-model="country" ref="sel" filterable>

比眉伴天荒/ 2021年06月11日 15:14/ 0 赞/ 867 阅读