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，进行排序