时间:2021-05-26
本文实例为大家分享了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功能不明确
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了vue按时间段查询的案例,效果图如下html代码今天昨天本周上周本月上月查询vue.js代码点击事件//获取时间、//时间解析;Time:f
在项目开发中,经常会碰到日期处理。比如查询中,可能会经常遇到按时间段查询,有时会默认取出一个月的数据。当我们提交数据时,会需要记录当前日期,等等。下面就看看一些
本文实例讲述了MySql查询时间段的方法。分享给大家供大家参考。具体方法如下:MySql查询时间段的方法未必人人都会,下面为您介绍两种MySql查询时间段的方法
前言在开发过程中经常会遇到筛选查询之类的功能,比如查询某一个时间段内的数据而非所有数据。这样我们就需要向后端发送时间段的参数,然后在后端处理查询。这里以Djan
百度的资料,保存下来:在写按时间段查询的sql语句的时候一般我们会这么写查询条件: wheredate>='2010-01-01'anddate='2010-0