vue 通过日期筛选数据

此片博客介绍的方法是通过请求后台数据给的状态,然后把自己选择的时间传过去实现筛选的,根据业务逻辑来参考吧!
下篇我们会说下通过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);
              
                }
                 
              })
            }   

以上的代码希望对你有帮助,当然写法有很多根据你们自己的风格去写, 喜欢的点个赞,

    原文作者:邱志刚
    原文地址: https://blog.csdn.net/qq_42957741/article/details/99641457
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞