这篇我们来说下根据前端vue过滤的方法来实现赛选
<div class="ag_yearlist" v-for="(item,key) in fliterlist" :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 的时间组件具体用法参考 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.dates = this.formatDate(this.currentDate,`yyyy${'年'}MM${'月'}`);
this.datesed = this.formatDate(this.currentDate,'yyyy-MM');
// console.log(this.datesed)
},
//请求数据
agplease(){
this.axios.get('user/bill').then(res => {
if(res.data.code === 200){
let aglist = res.data.data; // 总数据
this.list = aglist.list; // 数据·列表作为循环
console.log(this.list);
}
})
},
computed:{
// 记住上面 v-for 循环 循环的是此处fliterlist 不在是list了
fliterlist:function(){
// 通过过滤筛选出对应状态的数据
return this.list.filter((item) => {
return item.created_at.match(this,datesed)
})
}
}
这样我们就能通过过滤方法时间数据的筛选!以上自己的见解,勿喷!