el-date-picker時(shí)間清空值為null處理方案
element 時(shí)間選擇器處理選擇值 當(dāng)項(xiàng)目有時(shí)間選擇器有查詢條件定義數(shù)據(jù)為數(shù)組值,初始化值為空,當(dāng)選擇后值為一個(gè)數(shù)組,里面有兩個(gè)值,再次清空時(shí),值將變?yōu)閚ull,傳入后臺(tái)將報(bào)錯(cuò),采用watch監(jiān)聽處理這塊bug!
項(xiàng)目中的一些代碼
<el-col :span="10"> <el-form-item label="日期"> <el-date-picker v-model="overallForm.time" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="開始日期" end-placeholder="結(jié)束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" align="right" ></el-date-picker> </el-form-item> </el-col> 定義的data data() { return { pickerOptions: { shortcuts: [ { text: "最近一周", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit("pick", [start, end]); }, }, { text: "最近一個(gè)月", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit("pick", [start, end]); }, }, { text: "最近三個(gè)月", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit("pick", [start, end]); }, }, ], }, overallForm: { time: [], }, } }, methods:{ check(){ let params = { startTime: this.overallForm.time[0] , endTime: this.overallForm.time[1] , limit: this.page.pageSize, page: this.page.pageNo, }; //請(qǐng)求axios ************************* } }
這樣在發(fā)送接口時(shí)會(huì)暴露出一些問題。就如上文中提到選擇數(shù)據(jù)后清空后值不在是array而是null,這樣使用watch監(jiān)聽 watch不要直接監(jiān)聽整個(gè)對(duì)象,直接監(jiān)聽精準(zhǔn)值,避免不必要的性能浪費(fèi)
watch: { "overallForm.time"(newVal) { if (newVal == null) { this.overallForm.time = []; } }, },
這樣中間暴露的一些弊端就解決了
到此這篇關(guān)于el-date-picker時(shí)間清空值為null處理的文章就介紹到這了,更多相關(guān)el-date-picker null值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue3+ElementPlus el-date-picker設(shè)置可選時(shí)間范圍的示例代碼
- elementUI組件中el-date-picker限制時(shí)間范圍精確到小時(shí)的方法
- element組件el-date-picker禁用當(dāng)前時(shí)分秒之前的日期時(shí)間選擇
- 簡(jiǎn)單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問題
- element?ui時(shí)間日期選擇器el-date-picker報(bào)錯(cuò)Prop?being?mutated:"placement"解決方式
- Vue3 elementUI如何修改el-date-picker默認(rèn)時(shí)間
- vue el-date-picker動(dòng)態(tài)限制時(shí)間范圍案例詳解
- vue element-ui el-date-picker限制選擇時(shí)間為當(dāng)天之前的代碼
相關(guān)文章
vue3表單參數(shù)校驗(yàn)及正則表達(dá)式舉例詳解
最近項(xiàng)目中有一個(gè)校驗(yàn)身份證號(hào)手機(jī)號(hào)的業(yè)務(wù),索性給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue3表單參數(shù)校驗(yàn)及正則表達(dá)式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決
這篇文章主要介紹了關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vue.js 實(shí)現(xiàn)v-model與{{}}指令方法
這篇文章主要介紹了vue.js 實(shí)現(xiàn)v-model與{{}}指令方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10