本文例項為大家分享了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功能不明確

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。