element-UI 日期控件(datepicker)回显的注意事项

昨天在做一个有时间段选择的功能时,按照官方实例,如下代码

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="date"
      value-format="YYYY-MM-DD"
      placeholder="选择日期">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        value1: ''
      };
    }
  };
</script>

做完之后,要么就是回显不了,要么就是回显了之后,再次编辑时,显示的文本框里值不会变化,但是model里的值确实跟着变了。

  1. 开始赋值的value1是空字符串,但是在编辑回显时,该值为一个数组,值为Date类型。
  2. 在编辑时,用的 Object.assgin({},row)这种方式给model赋值,这个时候大概是将时间字段的类型给改变了,改成直接赋值的方式之后,该功能恢复正常。
  3. 编辑时,如果没有重新选择时间,那么model里的该字段依然是Date类型的数组,根据元素配置的格式YYYY-MM-DD,没有值传到后台去,此时要将数组里的值主动切换成需要的时间格式,后台才能正常接收到数据。

以上是使用datepicker空间需要注意的几点。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,904评论 1 32
  • ORA-00001: 违反唯一约束条件 (.) 错误说明:当在唯一索引所对应的列上键入重复值时,会触发此异常。 O...
    我想起个好名字阅读 11,005评论 0 9
  • 这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档,今天18年5月份再次想写文章,发现简书还为我保存起的...
    Jenaral阅读 8,043评论 2 9
  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 14,771评论 0 15
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 10,149评论 0 0

友情链接更多精彩内容