Vue按時間段查詢數(shù)據(jù)組件使用詳解
本文實例為大家分享了Vue按時間段查詢數(shù)據(jù)組件的具體使用代碼,供大家參考,具體內(nèi)容如下
首先是前端效果:
界面代碼如下:
<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="['開始時間', '結(jié)束時間']" @change="DateChange" @ok="DateOk" /> </a-form-item> </a-col> </template>
labelCol wrapperCol是布局變量
placeholder是默認(rèn)內(nèi)容
@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: '任務(wù)發(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中為調(diào)用的后端接口,和時間查詢無關(guān) }, } }, 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這個方法的運(yùn)行原理待研究
注意:DateChange應(yīng)放入methods中,否則找不到方法
startTime和endTime分別為數(shù)據(jù)庫中開始時間和結(jié)束時間字段
其中還有很多暫時看不懂的地方,其中引入的CuplyListMixin,filterObj,JEllipsis功能不明確
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue2.x Todo之自定義指令實現(xiàn)自動聚焦的方法
我們希望用戶雙擊 todo 進(jìn)入編輯狀態(tài)后輸入框自動獲取焦點,而不是需要先手動點一下。這篇文章主要介紹了Vue 2.x Todo之自定義指令實現(xiàn)自動聚焦,非常具有實用價值,需要的朋友可以參考下2019-01-01使用Vue進(jìn)行數(shù)據(jù)可視化實踐分享
在當(dāng)今的數(shù)據(jù)驅(qū)動時代,數(shù)據(jù)可視化變得越來越重要,它能夠幫助我們更直觀地理解數(shù)據(jù),從而做出更好的決策,在這篇博客中,我們將探索如何使用 Vue 和一些常見的圖表庫(如 Chart.js)來制作漂亮的數(shù)據(jù)可視化效果,需要的朋友可以參考下2024-10-10詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01Vue如何實現(xiàn)數(shù)據(jù)的上移和下移
這篇文章主要介紹了Vue如何實現(xiàn)數(shù)據(jù)的上移和下移問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06