vue中实现防抖功能

准备工作

项目中安装lodash，命令如下：
npm i --save lodash

引入到自己是需要使用的vue文件里面：
import _ from ‘lodash’

项目中实现

下拉选择框使用的是elementUI，可多选，但选择完后没确定按钮，选完后就需要直接请求。
此时就需要使用到防抖，防止反复请求，在用户选择完不再点击的时候过几秒才开始请求

<el-select:ref="`roleMultiSelect`"v-model="roleUsers"filterablecollapse-tagsmultipleplaceholder="请选择角色"@change="selUserType('传参')"><el-optionv-for="item in userAuthList":label="item":value="item":key="item"></el-option>
</el-select>

export default {data() {return {userAuthList： ['管理员', '普通人员', '人事管理员', '报表管理人员'],roleUsers: []},methods: {selUserTypeDebounce: _.debounce(function(row)// row就是你想随便的的传参，以下就是请求console.log('接收参数并发起请求', row)const selectRefName =`roleMultiSelect`setTimeout(() => {this.$refs[selectRefName].blur()}, 50)}, 1500),selUserType(row) {this.selUserTypeDebounce(row)}}
}

以下为处理各种数据的举例说明

1.取每个对象中的属性值，转为新的数组

2.取数组对象里面的需要的key，对应的最大值

3.取数组对象里面的需要的key，进行排序

vue中使用loadsh实现防抖功能及处理各种数据相关推荐

vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经 ...
Vue中JS遍历后台JAVA返回的Map数据,构造对象数组数据格式
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
vue 中的el表达式_解释el页面数据表达式
java web开发人员经常使用标签 struts标签库国际化配置配置国际化 1.国际化配置在struts自带的app中的struts-config.xml中的<message-resou ...
Vue中实现特效下拉加载更多数据
1.功能需求其实在很多的页面开发过程中,有些页面尤其是评论页面,在第一次加载的时候并不会加载很多的相关数据,而是加载一部分,当用户下拉旁边的滚动条时,尤其是滚动条移动到底部的时候,就会出现行的相关内 ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
vue中如何使用vi-for限制遍历的条数？只查询前三条、查询4-6条怎么实现？
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 前言今天整理个简单的功能,vue中的v-for如何限制遍历输出的数据,比如我想在一个存放10条数据的集合中只输出3条 ...
vue中8种组件通信方式,纯干货！值得收藏
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
vue中使用echart地图
vue中使用echart地图获取湖南的地图数据实现的效果步骤一些方法地图options 总结获取湖南的地图数据 https://gallery.echartsjs.com/editor.h ...
vue中过滤器filters的this指向问题。
今天在完成一个时间戳转化时想试试vue的过滤器filters,代码如下: execute_time(time) {if (time === 0) return '/'else return this. ...

vue中使用loadsh实现防抖功能及处理各种数据

准备工作

项目中实现

以下为处理各种数据的举例说明

vue中使用loadsh实现防抖功能及处理各种数据相关推荐

最新文章

热门文章