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ì)暴露出一些問(wèn)題。就如上文中提到選擇數(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í)間問(wèn)題
- 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.2?新增指令?v-memo?用法詳解(提高性能利器)
v-memo 接受一個(gè)依賴的數(shù)組,依賴的數(shù)組變化,v-memo 所對(duì)應(yīng)的 DOM 包括子集將會(huì)重新渲染,這篇文章主要介紹了Vue3.2?新增指令?v-memo?用法,提高性能的又一利器,需要的朋友可以參考下2022-09-09
uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)
在uni-app與Webview之間進(jìn)行數(shù)據(jù)交互是非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-07-07
從vue-router看前端路由的兩種實(shí)現(xiàn)
本文由淺入深觀摩vue-router源碼是如何通過(guò)hash與History interface兩種方式實(shí)現(xiàn)前端路由,介紹了相關(guān)原理,并對(duì)比了兩種方式的優(yōu)缺點(diǎn)與注意事項(xiàng)。最后分析了如何實(shí)現(xiàn)可以直接從文件系統(tǒng)加載而不借助后端服務(wù)器的Vue單頁(yè)應(yīng)用。2021-05-05
vue項(xiàng)目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
Vue使用VueUse構(gòu)建一個(gè)支持暫停/重置的CountUp組件
本文介紹了如何利用 VueUse 的 useRafFn 從零構(gòu)建一個(gè)功能更強(qiáng)大的 CountUp 組件,它不僅支持 vue-countup-v3 的全部特性,還額外提供了 pause、resume、reset 等命令式控制方法,感興趣的小伙伴可以了解下2026-04-04
vue中使用vant的Toast輕提示報(bào)錯(cuò)的解決
這篇文章主要介紹了vue中使用vant的Toast輕提示報(bào)錯(cuò)的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05
解決el-cascader在IE11瀏覽器中加載頁(yè)面自動(dòng)展開下拉框問(wèn)題
這篇文章主要為大家介紹了解決el-cascader在IE11瀏覽器中加載頁(yè)面自動(dòng)展開下拉框問(wèn)題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06

