ElementUI时间选择器,传入时间之后无法改变

最新推荐文章于 2023-11-21 10:21:40 发布

邵邵邵

最新推荐文章于 2023-11-21 10:21:40 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue+Elementui工作随笔文章标签： elementui html javascript

本文链接：https://blog.youkuaiyun.com/qq_45791799/article/details/120217949

Vue+Elementui工作随笔专栏收录该内容

21 篇文章

订阅专栏

该博客讲述了在Vue.js应用中如何初始化和监听`plan`字段，确保日期选择器能正确显示和响应当前年份。通过`mounted`钩子初始化`plan`为当前年份，并将其转化为字符串以适配日期选择器。同时，使用`watch`监听`plan`的变化，当`plan`改变时，动态更新`statisticsStart`和`statisticsEnd`，设置统计区间为当年的1月1日至12月31日。在处理过程中，强调了使用`this.$set`的重要性，以确保日期选择器能够正确绑定和更新值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：
计划年度（plan字段）:当前年份
统计区间(始)（statisticsStart字段）：监听计划年度，为计划年度的1月1日
统计区间(末)（statisticsEnd字段）：监听计划年度，为计划年度的12月31日
如下图所示：
在这里插入图片描述

1.初始化计划年度的值
注：这里date+‘ ’，是因为elementui的日期选择器接收的是字符串，而new Date().getFullYear()是Date数据类型，如果不转换成字符串，会报如下错：
在这里插入图片描述

mounted() {
    if (this.id == "new") {
      this.isEdit = false;
      var date = new Date().getFullYear()
      date = date + ''
      this.$set(this.formInline,'plan',date)
    } else {
      this.getList();
    }
  },

二、监听plan字段
注：这里必须使用this. $s e t 来赋值，不能直接赋值，否则虽然可以显示时间，但日期选择器的时间不能选择，换句话说，没有监听到时间的变化，所以一定要用 t h i s .$ set来添加属性并赋值

watch: {
      'formInline.plan': {
        handler() {
          console.log(this.formInline.plan,'this.formInline.plan---')
          this.$set(this.formInline,'statisticsStart', this.formInline.plan +'-01-01 20:46:17')
          this.$set(this.formInline,'statisticsEnd', this.formInline.plan +'-12-31 20:46:17')
          console.log(this.formInline)
        },
      }
    },