Vue按時間段查詢數(shù)據(jù)組件使用詳解
本文實例為大家分享了Vue按時間段查詢數(shù)據(jù)組件的具體使用代碼,供大家參考,具體內容如下
首先是前端效果:
界面代碼如下:
<template> <a-col :md="6" :sm="10"> <a-form-item label="執(zhí)行時間" :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: '任務發(fā)布列表', dateVal: '', queryParam: { createTimeRange:[], }, labelCol: { xs: { span: 1 }, sm: { span: 2 }, }, wrapperCol: { xs: { span: 10 }, sm: { span: 16 }, }, //此處為布局參數(shù) 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; // 時間參數(shù)不傳遞后臺 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分別為數(shù)據(jù)庫中開始時間和結束時間字段
其中還有很多暫時看不懂的地方,其中引入的CuplyListMixin,filterObj,JEllipsis功能不明確
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue2.x Todo之自定義指令實現(xiàn)自動聚焦的方法
我們希望用戶雙擊 todo 進入編輯狀態(tài)后輸入框自動獲取焦點,而不是需要先手動點一下。這篇文章主要介紹了Vue 2.x Todo之自定義指令實現(xiàn)自動聚焦,非常具有實用價值,需要的朋友可以參考下2019-01-01詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01Vue如何實現(xiàn)數(shù)據(jù)的上移和下移
這篇文章主要介紹了Vue如何實現(xiàn)數(shù)據(jù)的上移和下移問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06