iview 日期 datetimerange

最新推荐文章于 2024-09-04 07:20:29 发布

︶ㄣ洳影隨形しovё

最新推荐文章于 2024-09-04 07:20:29 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

文章标签： iview

本文链接：https://blog.csdn.net/qq_43907534/article/details/132096495

文章描述了在使用Vue和Iview组件的DatePicker时，编辑页面提示选择活动时间的问题，原因是v-model没有正确绑定到时间范围属性。解决方法是将v-model修改为:value。作者还提到通过百度搜索和CSDN链接找到的解决方案。

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

问题：每次点击编辑按钮进入到编辑页面，活动时间明明有值，却还是提示请选择活动时间。

在这里插入图片描述

原因：值没绑定上

解决办法：v-model 修改为 :value

<Form-item label="活动时间" prop="timeRange">
   <div style="display: flex">
       <Date-picker transfer type="datetimerange" format="yyyy-MM-dd HH:mm:ss"   @on-change="timeChange"  :value="formItem.timeRange" :editable="false" placeholder="请选择活动开始时间与截止时间" class="width-400"  :disabled="operate == 'detailOpt'">
       </Date-picker>
   </div>
</Form-item>

data() {
    return {
     // 表单校验
      ruleValidate: {
       timeRange: [{
          required: true,
          type: 'array',
          fields: {
            0: {
              required: true,
              message: '请选择活动时间',
              trigger: 'change',
              type: 'string'
            },
            1: {
              required: true,
              message: '请选择活动时间',
              trigger: 'change',
              type: 'string'
            }
          }
        }],
      },
    };
  },

解决问题的过程：
百度搜索关键字：iview 日期 prop
参考链接：https://blog.csdn.net/Gas_station/article/details/84632154
在这里插入图片描述