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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
js简单实现交换Li的值
May 22 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
javascript变量声明实例分析
Apr 25 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
bootstrap侧边栏圆点导航
Jan 11 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
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python微信公众号开发平台
2018/01/25 Python
Python算法中的时间复杂度问题
2019/11/19 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
毕业自荐信
2013/12/16 职场文书
回门宴答谢词
2014/01/13 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP