关于element时间范围选择组件遇到的问题，双向绑定不成功，实际值改变但是页面没有渲染出来

1.问题描述：使用element ui组件时间范围选择组件date-picker时，选择时间之后提交的值变化，但是页面值没有变化；

2.问题场景：在一个表单中，进行时间范围选择，即需要选择时间之后页面显示的时间和提交的时间相同；

3.问题代码：

<el-form-item label="选择时间" prop="dateRange">
  <el-date-picker
    value-format="yyyy-MM-dd"
    v-model="dataForm.dateRange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
  </el-date-picker>
</el-form-item>

const initForm = () => {
  return {
    id: ''，
    startDate:'',
    endDate:'',
    remark: '', // 备注
  };
};
export default {
 
  data() {
    return {
      visible: false,
      loadingStatus: false,
      dataForm: initForm(),
　}

getTaskInfo(this.dataForm.id).then(({ data }) => {
  this.dataForm = data;
　let dateRange = [this.dataForm.startDate,this.dataForm.endDate]

  this.dataForm.dateRange = dateRange;

});

4.错误分析：(1)没有在data里面定义初始化的值，即需要在data里面的dataForm中定义dateRange;即

const initForm = () => {
  return {
    id: ''，
    startDate:'',
    endDate:'',
　　 dateRange:[],
    remark: '', // 备注
  };
};

注意：虽然官方文档可以初始化类型为数组或者字符串dateRange:''，但是为了方便起见都定义为数组类型


(2)在data外面定义时间范围的接收值，会导致在双向绑定时，无法改变组件中的值，虽然其实际值已经改变

（3）this.dataForm = data;这种写法时错误的，因为这相当于把返回值data完全赋值给了dataForm，
这导致页面初始化form的值全部丢失，这里应该使用Object.assign(target,resource1,resource2)
对象的拷贝,target是目标对象，resource是需要复制拷贝的源对象，这个方法用来将源对象中和目标对象
相同的属性即相同的字段或者键名的值拷贝到目标对象对应的属性的值，源对象中存在的目标对象所不存在的
属性即键名或者字段等也会合并到目标对象中，；this.dataForm = Object.assign(this.dataForm,data);

标签：endDate,对象,dateRange,绑定,element,dataForm,组件,data,页面
来源： https://www.cnblogs.com/g1997/p/16450120.html