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

 更新时间:2024年08月12日 10:01:01   作者: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值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3表单参数校验及正则表达式举例详解

    vue3表单参数校验及正则表达式举例详解

    最近项目中有一个校验身份证号手机号的业务,索性给大家总结下,这篇文章主要给大家介绍了关于vue3表单参数校验及正则表达式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • vue中map()快速使用方法小结

    vue中map()快速使用方法小结

    map()函数是在JS的数组中定义的,它返回一个新的数组,下面这篇文章主要给大家介绍了关于vue中map()快速使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Vue中如何使用base64编码和解码

    Vue中如何使用base64编码和解码

    这篇文章主要介绍了Vue中如何使用base64编码和解码问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • 关于配置babel-plugin-import报错的坑及解决

    关于配置babel-plugin-import报错的坑及解决

    这篇文章主要介绍了关于配置babel-plugin-import报错的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 详解hooks在vue3中的使用方法及示例

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

    hooks可以通过特定的函数将逻辑 "钩入" 组件中,使得开发者能够更灵活地构建和管理组件的功能从而提高代码的可读性以及可维护性等,本篇文章将介绍hooks如何在vue3中使用以及它的一些实际使用例子,让大家能更好的了解和使用hooks,需要的朋友可以参考下
    2023-09-09
  • 详解vue mixins和extends的巧妙用法

    详解vue mixins和extends的巧妙用法

    vue提供了mixins、extends配置项,最近使用中发现很好用。下面小编通过本文给大家介绍下vue中 mixins和extends的巧妙用法,需要的朋友参考下吧
    2017-12-12
  • Vue mixins混入使用解析

    Vue mixins混入使用解析

    如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixins特性,这时使用Vue mixins混入有很大好处,下面就介绍下Vue mixins混入使用方法,需要的朋友参考下吧
    2023-02-02
  • vue.js 实现v-model与{{}}指令方法

    vue.js 实现v-model与{{}}指令方法

    这篇文章主要介绍了vue.js 实现v-model与{{}}指令方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Vue 检测变化的注意事项

    Vue 检测变化的注意事项

    这篇文章主要介绍了Vue 检测变化的注意事项,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • 关于VUE的编译作用域及slot作用域插槽问题

    关于VUE的编译作用域及slot作用域插槽问题

    这篇文章主要介绍了VUE 的编译作用域及slot作用域插槽问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07

最新评论