欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

el-date-picker時(shí)間清空值為null處理方案

 更新時(shí)間:2024年08月12日 10:01:01   作者:lixh_man  
本文介紹關(guān)于Vue.js項(xiàng)目中時(shí)間選擇器組件的問題,當(dāng)選擇后清空導(dǎo)致值變?yōu)閚ull,進(jìn)而引發(fā)后臺(tái)接口報(bào)錯(cuò),通過監(jiān)聽`overallForm.time`的值并設(shè)置為空數(shù)組,成功解決此問題,確保了數(shù)據(jù)正確性,同時(shí),建議避免直接監(jiān)聽整個(gè)對(duì)象以優(yōu)化性能,感興趣的朋友一起看看吧

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!

elementui的時(shí)間選擇器

項(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue3表單參數(shù)校驗(yàn)及正則表達(dá)式舉例詳解

    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
  • vue中map()快速使用方法小結(jié)

    vue中map()快速使用方法小結(jié)

    map()函數(shù)是在JS的數(shù)組中定義的,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • Vue中如何使用base64編碼和解碼

    Vue中如何使用base64編碼和解碼

    這篇文章主要介紹了Vue中如何使用base64編碼和解碼問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • 關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決

    關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決

    這篇文章主要介紹了關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • 詳解hooks在vue3中的使用方法及示例

    詳解hooks在vue3中的使用方法及示例

    hooks可以通過特定的函數(shù)將邏輯 "鉤入" 組件中,使得開發(fā)者能夠更靈活地構(gòu)建和管理組件的功能從而提高代碼的可讀性以及可維護(hù)性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實(shí)際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下
    2023-09-09
  • 詳解vue mixins和extends的巧妙用法

    詳解vue mixins和extends的巧妙用法

    vue提供了mixins、extends配置項(xiàng),最近使用中發(fā)現(xiàn)很好用。下面小編通過本文給大家介紹下vue中 mixins和extends的巧妙用法,需要的朋友參考下吧
    2017-12-12
  • Vue mixins混入使用解析

    Vue mixins混入使用解析

    如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度,針對(duì)這種情況官方提供了Mixins特性,這時(shí)使用Vue mixins混入有很大好處,下面就介紹下Vue mixins混入使用方法,需要的朋友參考下吧
    2023-02-02
  • vue.js 實(shí)現(xiàn)v-model與{{}}指令方法

    vue.js 實(shí)現(xiàn)v-model與{{}}指令方法

    這篇文章主要介紹了vue.js 實(shí)現(xiàn)v-model與{{}}指令方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10
  • Vue?檢測(cè)變化的注意事項(xiàng)

    Vue?檢測(cè)變化的注意事項(xiàng)

    這篇文章主要介紹了Vue?檢測(cè)變化的注意事項(xiàng),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-08-08
  • 關(guān)于VUE的編譯作用域及slot作用域插槽問題

    關(guān)于VUE的編譯作用域及slot作用域插槽問題

    這篇文章主要介紹了VUE 的編譯作用域及slot作用域插槽問題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-07-07

最新評(píng)論