el-form+el-date-picker组合使用时候的回显问题

背景

我有弹窗创建任务时间的需求,同时也可以修改任务时间,所以复用了弹窗和表单,但在表单里使用日期时间组件的时候,发现了问题

问题描述:在表单中使用form的属性绑定日期时间选择器的v-model,会出现的两个问题如下

  1. 修改时间的时候,回显会有问题

  2. 表单的校验会用不了

javascript 复制代码
   <el-form-item label="任务时间" prop="taskTime">
         <el-date-picker
            v-model="form.taskTime"
            placeholder="请选择时间范围"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            width="400px"
          />
   </el-form-item>

解决方式如下:

vue组件部分

javascript 复制代码
<el-form-item label="任务时间" prop="taskTime">
          <el-date-picker
            v-model="form.taskTime"
            :key="datePickerKey"
            placeholder="请选择时间范围"
            type="datetimerange"
            range-separator="~"
            @input="datetimeChange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            width="400px"
          />
        </el-form-item>

js部分

javascript 复制代码
data() {
     return {
        form: {
          taskTime: [null, null], // 确保初始化
        },
        datePickerKey: 0,
        rules: {
             taskTime: [
            { type: 'array', required: true, trigger: 'blur', message: '请选择任务时间' },
            {
              validator: (rule, value, callback) => {
                const val = this.form.taskTime;
                if (val && val.length === 2 && val[0] && val[1]) {
                  callback();
                } else {
                  callback(new Error('请选择任务时间'));
                }
              },
            },
        },
      };
    },
  watch: {
     visible(newV) {
        if(!newV) { // 关闭弹窗的时候清空表单校验
          this.$nextTick(() => {
            this.$refs.formRef.clearValidate();
          });
        }
      }
  },
methods: {

      /**
       * 开始日期-结束日期改变
       * **/
      datetimeChange(e) {
        if (e && e.length === 2) {
          this.$set(this.form, 'taskTime', e);
        } else {
          this.$set(this.form, 'taskTime', ['', '']);
        }
        this.$refs.formRef.clearValidate(['taskTime']);
        this.datePickerKey = (new Date()).getTime();
      },
}
相关推荐
Stuild Stuil2 分钟前
Mysql 字段值批量自增或自减(坐标系数据,(x,y))
java·javascript·mysql
水煮白菜王3 分钟前
首屏加载时间优化解决
前端·javascript·react.js
还是鼠鼠5 分钟前
Node.js 中间件-中间件的概念与格式
前端·javascript·vscode·node.js·express
Hamm14 分钟前
为了减少维护成本,我们把AirPower4T拆成了一个个NPM包
前端·vue.js·typescript
路光.26 分钟前
Vue3实现锚点定位
前端·javascript·vue.js·vue3
唔661 小时前
flutter 曲线学习 使用第三方插件实现左右滑动
javascript·学习·flutter
xiezhuangshunv1 小时前
20250401-vue-声明触发的事件
前端·javascript·vue.js
PBitW1 小时前
微信小程序 -- 原生封装table
前端·微信小程序
小满zs2 小时前
React-router v7 第一章(安装)
前端·react.js