vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > el-date-picker null值

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

作者：lixh_man

本文介绍关于Vue.js项目中时间选择器组件的问题,当选择后清空导致值变为null,进而引发后台接口报错,通过监听`overallForm.time`的值并设置为空数组,成功解决此问题,确保了数据正确性,同时,建议避免直接监听整个对象以优化性能,感兴趣的朋友一起看看吧

element 时间选择器处理选择值 当项目有时间选择器有查询条件定义数据为数组值，初始化值为空，当选择后值为一个数组，里面有两个值，再次清空时，值将变为null，传入后台将报错，采用watch监听处理这块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
        *************************
       } 
  }

这样在发送接口时会暴露出一些问题。就如上文中提到选择数据后清空后值不在是array而是null，这样使用watch监听 watch不要直接监听整个对象，直接监听精准值，避免不必要的性能浪费

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

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

到此这篇关于el-date-picker时间清空值为null处理的文章就介绍到这了,更多相关el-date-picker null值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文