el-date-picker 时间回显未生效解决

HTML 代码块:


        <el-date-picker

            v-model="value1"

            type="datetimerange"

            range-separator="至"

            :start-placeholder="formInline.start_time"

            :end-placeholder="formInline.end_time"

            @change="changeTime"

            @blur="selctTime"

            value-format="yyyy-MM-dd"    

          >

       </el-date-picker>



data数据声明: formInline: {
                   start_time:“”,
                   end_time:“”
                },
              value1:“”


js 模块:
// 判断默认值不能超过当日一个月幅度
changeTime(val) {
      if (new Date(val[1]) - new Date(val[0]) > 1 * 24 * 60 * 60 * 1000 * 30) {
        this.$message({
          message: "起始结束日期幅度不能超过一个月",
          type: "warning",
        });
        this.value1 = "";
      } else {
        this.formInline.start_time = val[0];
        this.formInline.end_time_time = val[1];
        this.$forceUpdate() //这行可有可无
      }
    },
//获取默认值  当天,以及过去三十天
 weekBefore() {
      const weekBefore = moment().subtract(30, "days").format("YYYY-MM-DD"); // 近三十日日期
      const today = moment().format("YYYY-MM-DD"); //当前日期
      this.formInline.start_time = weekBefore;
      this.formInline.end_time = today;
    },


 //重置表单  有一个重置按钮  你们可以把这个位置用在请求接口拿到数据赋值开始时间结束时间
    resetting(){
      this.formInline={
        start_time: "",
        end_time: "",
      }
      this.formInline.start_time= moment().subtract(30, "days").format("YYYY-MM-DD"); // 近三十日日期
      this.formInline.end_time= moment().format("YYYY-MM-DD"); //当前日期
      this.$set(this.value1, 0, this.formInline.start_time); //赋值   直接赋值不生效
      this.$set(this.value1, 1, this.formInline.end_time);//赋值  直接赋值不生效
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-date-picker日期不回显的问题可能是由于绑定的v-model值已经改变,但是控件中没有实时更新导致的。解决这个问题的方法有两种。一种是在input方法中使用this.$set方法进行数据的更新,另一种是直接使用this.$set方法给v-model赋值。 具体操作可以参考以下代码示例: ```html <el-date-picker v-model="formObj.formModel.deadTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @input="testClick"></el-date-picker> ``` 在input方法中使用this.$set方法进行数据的更新: ```javascript methods: { testClick(newVal) { this.$set(this.formObj.formModel, "deadTime", newVal); } } ``` 或者直接使用this.$set方法给v-model赋值: ```javascript methods: { testClick(newVal) { this.$set(this.formObj, "formModel", { deadTime: newVal }); } } ``` 以上方法都可以解决el-date-picker日期不回显的问题。如果还有其他问题,请提供更多相关信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue.jsel-data-picker中type="daterange"修改日期的时候数据不回写的问题。](https://blog.csdn.net/wszhm123/article/details/97800087)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [el-date-picker选择后页面没有回显](https://blog.csdn.net/oldolder/article/details/125871547)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值