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