el-date-picker時間清空值為null處理方案

更新時間：2024年08月12日 10:01:01 作者：lixh_man

本文介紹關于Vue.js項目中時間選擇器組件的問題,當選擇后清空導致值變?yōu)閚ull,進而引發(fā)后臺接口報錯,通過監(jiān)聽`overallForm.time`的值并設置為空數(shù)組,成功解決此問題,確保了數(shù)據正確性,同時,建議避免直接監(jiān)聽整個對象以優(yōu)化性能,感興趣的朋友一起看看吧

element 時間選擇器處理選擇值當項目有時間選擇器有查詢條件定義數(shù)據為數(shù)組值，初始化值為空，當選擇后值為一個數(shù)組，里面有兩個值，再次清空時，值將變?yōu)閚ull，傳入后臺將報錯，采用watch監(jiān)聽處理這塊bug!

elementui的時間選擇器

項目中的一些代碼

<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="結束日期"
              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ù)據后清空后值不在是array而是null，這樣使用watch監(jiān)聽 watch不要直接監(jiān)聽整個對象，直接監(jiān)聽精準值，避免不必要的性能浪費

  watch: {
    "overallForm.time"(newVal) {
      if (newVal == null) {
        this.overallForm.time = [];
      }
    },
  },

這樣中間暴露的一些弊端就解決了

到此這篇關于el-date-picker時間清空值為null處理的文章就介紹到這了,更多相關el-date-picker null值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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

el-date-picker時間清空值為null處理方案

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具