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-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;    //让当前的页面显示第一页。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);}})}

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

vue 通过日期筛选数据相关推荐

python按照日期筛选数据_Pandas日期数据处理：如何按日期筛选、显示及统计数据...
前言 pandas有着强大的日期数据处理功能,本期我们来了解下pandas处理日期数据的一些基本功能,主要包括以下三个方面: 按日期筛选数据按日期显示数据按日期统计数据运行环境为 windows ...
解决vue 提交日期格式数据，时间出现时区差的问题
解决vue 提交日期格式数据,时间出现时区差的问题一.错误源: 在自定义create_time ,进行前端vue 向后端django 传入数据时,发现 {'create_time': [ErrorD ...
python按照日期筛选数据_日期时间范围上的Python筛选器？
我有一些包含开始时间和结束时间的数据(datetime格式),我想根据更受限制的日期范围计算持续时间(以小时为单位).但到目前为止,我还没有成功.(对python还是个业余爱好者.) 示例:John ...
python按照日期筛选数据_pandas 按日期范围筛选数据的实现
pandas 是 python 中一个功能强大的库,这里就不再复述了,简单介绍下用日期范围筛选 pandas 数据. 日期转换用来筛选的列是 date 类型,所以这里要把要筛选的日期范围从字符串转成 ...
VBA 根据日期筛选数据
筛选两个日期间的全部数据 Dim a, b, c a = Format(Date, "yyyy/m") '当前年月日 MsgBox a '显示日期时间 '当前月份加4 b = D ...
python按照日期筛选数据_python – 按时间戳列筛选/选择pandas dataframe行
我是熊猫新手.我的数据框有两列dt(日期时间戳)和值. 给出两个开始和结束数据时间戳:是否有一种简单的方法可以从包含两个日期时间戳之间的行的原始数据帧创建新数据帧? dt value 84 7/23/ ...
R语言基于日期范围筛选数据实战（Subset by a Date Range）:日期范围之内的数据、日期范围之外的数据、日期之后的数据、日期之前的数据
R语言基于日期范围筛选数据实战(Subset by a Date Range):日期范围之内的数据.日期范围之外的数据.日期之后的数据.日期之前的数据目录 R语言基于日期范围筛选数据实战(Subse ...
pandas 按日期范围筛选数据的实现
<h1 class="title">pandas 按日期范围筛选数据的实现</h1><div class="info"> ...
sql server根据日期筛选出工作日的数据
sql server根据日期筛选出工作日的数据 1.如果单纯筛选出除周六和周日的数据 SELECT * FROM 你创建的表 WHERE DATEPART(weekday,字段(日期)) <&g ...

vue 通过日期筛选数据

vue 通过日期筛选数据相关推荐

最新文章

热门文章