此片博客介紹的方法是通過請求后臺數(shù)據(jù)給的狀態(tài)，然后把自己選擇的時間傳過去實現(xiàn)篩選的，根據(jù)業(yè)務(wù)邏輯來參考吧！
下篇我們會說下通過vue過濾器來實現(xiàn)的方法！
業(yè)務(wù)邏輯：首先前端需要獲取其用戶選擇的日期數(shù)據(jù)，然后通過接口把日期數(shù)據(jù)傳給后端，后端接收數(shù)據(jù)會返回給前端新的數(shù)據(jù)，頁面在進(jìn)行渲染，。到此功能會是實現(xiàn)了，

html部分·

<div class="ag_listmain clearfix"> <div class="ag_yearlist" v-for="(item,key) in list" :key="key" @click="agrouter(item.id)"><div class="agtitle"><p>余額提現(xiàn)-到{{item.from_to}}</p><label>{{item.created_at}}</label></div><div class="ag_money"><h4>{{item.money}}</h4><label>提現(xiàn)成功</label></div></div>

vant日期組件

<van-popupv-model="show"position="bottom"><van-datetime-pickerv-model="currentDate"type="year-month":min-date="minDate":formatter="formatter"@confirm="confirm()"@cancel='cancel()' /></van-popup>

js 部分·

return{list:[] ，datesed:"", }// 選擇事件后確定按鈕方法confirm(){this.show=false;this.page = 1; //讓當(dāng)前的頁面顯示第一頁。this.dates = this.formatDate(this.currentDate,`yyyy${'年'}MM${'月'}`); //將日期轉(zhuǎn)化為時間值 在我的博客主頁能找到這關(guān)于這個的博客this.datesed = this.formatDate(this.currentDate,'yyyy-MM'); //將日期轉(zhuǎn)化為時間值 在我的博客主頁能找到這關(guān)于這個的博客this.list = []; // 讓當(dāng)前循環(huán)的數(shù)據(jù)為空，因為我做的數(shù)據(jù)分頁是往里對堆數(shù)據(jù)的，this.agplease(); //執(zhí)行請求數(shù)據(jù)方法// console.log(this.datesed) //獲取時間值}, //請求數(shù)據(jù)agplease(){this.axios.get('user/bill',{params : {state : 3, //傳參數(shù)page:this.page,page_size:8,date : this.datesed, //后臺給的狀態(tài)等于你提交的時間數(shù)據(jù)。這樣就可以了，}}).then(res => {// 下面嗎是我自己處理數(shù)據(jù)的方法，if(res.data.code === 200){let aglist = res.data.data; // 總數(shù)據(jù)let arr = aglist.list; // 數(shù)據(jù)·列表作為循環(huán)let page_size =this.aglist.page_size; // 每頁顯示條數(shù) for(let i=0; i<arr.length; i++){// console.log(this.list)this.list.push(arr[i]); }console.log(this.list);this.lastpage =aglist.total_page;// 加載狀態(tài)結(jié)束this.loading = false;if(this.lastpage <= this.page){this.finished = true;} this.page++; // console.log(this.list);}})}

以上的代碼希望對你有幫助，當(dāng)然寫法有很多根據(jù)你們自己的風(fēng)格去寫， 喜歡的點(diǎn)個贊，

總結(jié)

以上是生活随笔為你收集整理的vue 通过日期筛选数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。