el-date-picker时间清空值为null处理

element 时间选择器处理选择值

当项目有时间选择器有查询条件定义数据为数组值，初始化值为空，当选择后值为一个数组，里面有两个值，再次清空时，值将变为null，传入后台将报错，采用watch监听处理这块bug!

项目中的一些代码

          
            
          
        
        定义的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
        *************************
       } 
  }

这样在发送接口时会暴露出一些问题。就如上文中提到选择数据后清空后值不在是array而是null，这样使用watch监听

watch不要直接监听整个对象，直接监听精准值，避免不必要的性能浪费

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

这样中间暴露的一些弊端就解决了