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实现防抖功能及处理各种数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。