el-date-picker時間清空值為null處理方案
更新時間：2024年08月12日 10:01:01 作者：lixh_man
本文介紹關(guān)于Vue.js項目中時間選擇器組件的問題,當(dāng)選擇后清空導(dǎo)致值變?yōu)閚ull,進而引發(fā)后臺接口報錯,通過監(jiān)聽`overallForm.time`的值并設(shè)置為空數(shù)組,成功解決此問題,確保了數(shù)據(jù)正確性,同時,建議避免直接監(jiān)聽整個對象以優(yōu)化性能,感興趣的朋友一起看看吧
element 時間選擇器處理選擇值 當(dāng)項目有時間選擇器有查詢條件定義數(shù)據(jù)為數(shù)組值，初始化值為空，當(dāng)選擇后值為一個數(shù)組，里面有兩個值，再次清空時，值將變?yōu)閚ull，傳入后臺將報錯，采用watch監(jiān)聽處理這塊bug!
項目中的一些代碼
<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: "最近一個月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三個月",
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,
};
//請求axios
*************************
}
}這樣在發(fā)送接口時會暴露出一些問題。就如上文中提到選擇數(shù)據(jù)后清空后值不在是array而是null，這樣使用watch監(jiān)聽 watch不要直接監(jiān)聽整個對象，直接監(jiān)聽精準(zhǔn)值，避免不必要的性能浪費
watch: {
"overallForm.time"(newVal) {
if (newVal == null) {
this.overallForm.time = [];
}
},
},這樣中間暴露的一些弊端就解決了
到此這篇關(guān)于el-date-picker時間清空值為null處理的文章就介紹到這了,更多相關(guān)el-date-picker null值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Vue3+ElementPlus el-date-picker設(shè)置可選時間范圍的示例代碼
- elementUI組件中el-date-picker限制時間范圍精確到小時的方法
- element組件el-date-picker禁用當(dāng)前時分秒之前的日期時間選擇
- 簡單設(shè)置el-date-picker的默認(rèn)當(dāng)前時間問題
- element?ui時間日期選擇器el-date-picker報錯Prop?being?mutated:"placement"解決方式
- Vue3 elementUI如何修改el-date-picker默認(rèn)時間
- vue el-date-picker動態(tài)限制時間范圍案例詳解
- vue element-ui el-date-picker限制選擇時間為當(dāng)天之前的代碼
相關(guān)文章
最近項目中有一個校驗身份證號手機號的業(yè)務(wù),索性給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue3表單參數(shù)校驗及正則表達式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue中如何使用base64編碼和解碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
關(guān)于配置babel-plugin-import報錯的坑及解決
這篇文章主要介紹了關(guān)于配置babel-plugin-import報錯的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
hooks可以通過特定的函數(shù)將邏輯 "鉤入" 組件中,使得開發(fā)者能夠更靈活地構(gòu)建和管理組件的功能從而提高代碼的可讀性以及可維護性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下2023-09-09
vue提供了mixins、extends配置項，最近使用中發(fā)現(xiàn)很好用。下面小編通過本文給大家介紹下vue中 mixins和extends的巧妙用法，需要的朋友參考下吧2017-12-12
如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
vue.js 實現(xiàn)v-model與{{}}指令方法
這篇文章主要介紹了vue.js 實現(xiàn)v-model與{{}}指令方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了Vue?檢測變化的注意事項，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了VUE 的編譯作用域及slot作用域插槽問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-07-07