Vue按时间段查询数据组件使用详解


Posted in Javascript onAugust 21, 2020

本文实例为大家分享了Vue按时间段查询数据组件的具体使用代码,供大家参考,具体内容如下

首先是前端效果:

Vue按时间段查询数据组件使用详解

界面代码如下:

<template>
<a-col :md="6" :sm="10">
 <a-form-item label="执行时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
 <a-range-picker
 style="width: 210px"
 v-model="queryParam.createTimeRange"
 format="YYYY-MM-DD"
 :placeholder="['开始时间', '结束时间']"
 @change="DateChange"
 @ok="DateOk" />
 </a-form-item>
 </a-col>
</template>

labelCol wrapperCol是布局变量
placeholder是默认内容
@change @ok 绑定两个事件,事件代码在下面

js代码如下:

<script>
 import { CuplyListMixin } from '@/mixins/CuplyListMixin'
 import { filterObj } from '@/utils/util';
 import JEllipsis from '@/components/cuply/JEllipsis'

 export default {
 name: 'taskRelease',
 mixins:[CuplyListMixin],
 components:{
 JEllipsis,
 },

 data () {
 return {
 description: '任务发布列表',
 dateVal: '',
 queryParam: {
 createTimeRange:[],
 },
 
 labelCol: {
 xs: { span: 1 },
 sm: { span: 2 },
 },
 wrapperCol: {
 xs: { span: 10 },
 sm: { span: 16 },
 },
 //此处为布局参数
 url: {
 list: "/business/checktask/list",
 delete: "/business/checktask/delete",
 //url中为调用的后端接口,和时间查询无关
 },
 }
 },

methods: {
 getQueryParams(){
 console.log(this.queryParam.createTimeRange)
 var param = Object.assign({}, this.queryParam,this.isorter);
 param.field = this.getQueryField();
 param.pageNo = this.ipagination.current;
 param.pageSize = this.ipagination.pageSize;
 delete param.createTimeRange; // 时间参数不传递后台
 return filterObj(param);
 },
 DateChange: function (value, dateString) {
 console.log(dateString[0],dateString[1]);
 this.queryParam.startTime_begin=dateString[0];
 this.queryParam.endTime_end=dateString[1];
 },
 DateOk(value) {
 console.log(value);
 }
 },
 </script>

getQueryPaeams这个方法的运行原理待研究
注意:DateChange应放入methods中,否则找不到方法
startTime和endTime分别为数据库中开始时间和结束时间字段

其中还有很多暂时看不懂的地方,其中引入的CuplyListMixin,filterObj,JEllipsis功能不明确

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
js 轮播效果实例分享
Dec 28 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
js绘制一条直线并旋转45度
Aug 21 #Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 #Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 #Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 #Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 #Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 #Javascript
JavaScript 空间坐标的使用
Aug 19 #Javascript
You might like
织梦模板标记简介
2007/03/11 PHP
php中对2个数组相加的函数
2011/06/24 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
python生成日历实例解析
2014/08/21 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
管理科学大学生求职信
2013/11/13 职场文书
揠苗助长教学反思
2014/02/04 职场文书
人力资源部岗位职责
2015/02/11 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
军训结束新闻稿
2015/07/17 职场文书
初三语文教学反思
2016/03/03 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS