此片博客介绍的方法是通过请求后台数据给的状态,然后把自己选择的时间传过去实现筛选的,根据业务逻辑来参考吧!
下篇我们会说下通过vue过滤器来实现的方法!
业务逻辑:首先前端需要获取其用户选择的日期数据,然后通过接口把日期数据传给后端,后端接收数据会返回给前端新的数据,页面在进行渲染,。到此功能会是实现了,
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>余额提现-到{
{item.from_to}}</p>
<label>{
{item.created_at}}</label>
</div>
<div class="ag_money">
<h4>{
{item.money}}</h4>
<label>提现成功</label>
</div>
</div>
vant日期组件
<van-popup
v-model="show"
position="bottom"
>
<van-datetime-picker
v-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; //让当前的页面显示第一页。
this.dates = this.formatDate(this.currentDate,`yyyy${'年'}MM${'月'}`); //将日期转化为时间值 在我的博客主页能找到这关于这个的博客
this.datesed = this.formatDate(this.currentDate,'yyyy-MM'); //将日期转化为时间值 在我的博客主页能找到这关于这个的博客
this.list = []; // 让当前循环的数据为空,因为我做的数据分页是往里对堆数据的,
this.agplease(); //执行请求数据方法
// console.log(this.datesed) //获取时间值
},
//请求数据
agplease(){
this.axios.get('user/bill',{
params : {
state : 3, //传参数
page:this.page,
page_size:8,
date : this.datesed, //后台给的状态等于你提交的时间数据。这样就可以了,
}
}).then(res => {
// 下面吗是我自己处理数据的方法,
if(res.data.code === 200){
let aglist = res.data.data; // 总数据
let arr = aglist.list; // 数据·列表作为循环
let page_size =this.aglist.page_size; // 每页显示条数
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;
// 加载状态结束
this.loading = false;
if(this.lastpage <= this.page){
this.finished = true;
}
this.page++;
// console.log(this.list);
}
})
}
以上的代码希望对你有帮助,当然写法有很多根据你们自己的风格去写, 喜欢的点个赞,