ElementUI组件使用el-date-picker日期选择器使用回显

此处采用的方案二

日期组件的使用

绑定数据对象form.date1

<el-form-item label="活动时间" prop="activeDateTime">
  <el-col :span="11">

    <el-date-picker 
      v-model="form.date1" 
      type="daterange" 
      range-separator="至" 
      start-placeholder="开始日期"  
      end-placeholder="结束日期"
      >
    </el-date-picker>

  </el-col>
</el-form-item>

获取日期数据格式化后传递后端

let fromData = deepClone(this.form)
fromData.activeStartTime = parseTime(  this.form.date1[0] , '{y}-{m}-{d}')
fromData.activeEndTime = parseTime(  this.form.date1[1] , '{y}-{m}-{d}')

获取接口响应的日期数据并回显页面

日期回显设置

this.$set(this.form,'date1',[fromData.activeStartTime,fromData.activeEndTime])

完整使用例子

getPrize(this.form.id).then(response => {
        let resp = response.data;

        // 深度复制 form 数据
        let fromData = deepClone(resp.activeInfo);

        // 处理日期格式数据
        let dateParts = fromData.activeStartTime.split("-"); // 字符串日期格式 2020-01-01
        let dateObject = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]); // 转换为日期对象
        fromData.activeStartTime = dateObject;
        dateParts = fromData.activeEndTime.split("-");
        dateObject = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
        fromData.activeEndTime = dateObject;

        // 表单数据
        this.form = fromData;

        // 日期回显
        this.$set(this.form,'date1',[fromData.activeStartTime,fromData.activeEndTime])

        // 表格数据
        this.tableData = resp.prizeList;
      });