el-date-picker时间范围 编辑回显后不能修改问题

el-date-picker daterange时间范围 编辑回显后不能修改

javascript 复制代码
 <el-form-item
          :label="LABELS.gplanRecordDateLabel"
          prop="gplanRecordDate">
            <el-date-picker
            style="width: 300px"
      v-model="formData.gplanRecordDate"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
          </el-form-item>
javascript 复制代码
gplanRecordDate: [
    {
      required: true,
      trigger: 'blur',
      message: '时间范围不能为空',
    },
  ],

解决办法

在编辑回显时,属性赋值使用下面方法赋值:

javascript 复制代码
Vue3写法:
  proxy.$set(formData.value, 'gplanRecordDate', [
          new Date(props.data.gplanStarttime),
          new Date(props.data.gplanEndtime),
        ]);
Vue2写法
this.$set(formData.value, 'gplanRecordDate', [
          new Date(props.data.gplanStarttime),
          new Date(props.data.gplanEndtime),
        ]);

主要就是在赋值时,使用$set方法,绑定响应式

相关推荐
神仙别闹5 分钟前
基于 Vue+SQLite3开发吉他谱推荐网站
前端·vue.js·sqlite
Async Cipher8 分钟前
CSS 居中
前端·css·css3
IT_陈寒33 分钟前
Python 3.12 的这5个新特性,让我的代码性能提升了40%!
前端·人工智能·后端
方安乐1 小时前
vite+vue+js项目使用ts报错
前端·javascript·vue.js
韩立23331 小时前
Vue 3.5 升级指南
前端·vue.js
子兮曰1 小时前
🚀别再乱写package.json了!这些隐藏技巧让项目管理效率提升300%
前端·javascript·npm
我叫汪枫1 小时前
Spring Boot图片验证码功能实现详解 - 从零开始到完美运行
java·前端·javascript·css·算法·html
小桥风满袖1 小时前
极简三分钟ES6 - ES8中async,await
前端·javascript
一直在学习的小白~2 小时前
node_modules 明明写进 .gitignore,却还是被 push/commit 的情况
前端·javascript·vue.js
前端小超超2 小时前
如何配置capacitor 打包的ios app固定竖屏展示?
前端·ios·web app