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

    xiaoxiao2022-07-14  178

    1. 业务场景:模糊搜索姓名,点击选择

    2. 示例代码  

    template: <Select @on-change='check' 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) } }

    原文:https://blog.csdn.net/weixin_43206949/article/details/84566847 

    最新回复(0)