解决vue中el-date-picker type=daterange日期不回显的问题

下面是针对“解决vue中el-date-picker type=daterange日期不回显的问题”的完整攻略：

1. 问题描述

在使用vue中的element-ui组件库时，我们可能会遇到这样的问题，即el-date-picker控件中type属性设置为daterange时，选择日期后无法正确回显。这种问题可能会造成用户困扰，降低用户体验度。

2. 解决方案

针对这种情况，我们可以通过以下两种方式解决：

2.1 通过sync绑定实现

在页面中，我们可以使用sync绑定实现daterange类型的日期选择器的正确回显，代码示例如下：

<el-date-picker
  type="daterange"
  v-model="dateRange"
  :sync="false"      <!-- 关键点 -->
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>

注意上面代码中添加的:sync="false"，这个属性表示不开启同步更新。通过这种方式，可以解决daterange类型日期选择器无法正常回显的问题。

2.2 自行编写watch监听方法

在Vue组件的watch生命周期钩子中添加监听daterange类型的日期选择器值变化的方法，从而解决无法回显的问题。具体方式如下：

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

<script>
export default {
  data() {
    return {
      date: [], 
      //这里是关键，对应date-picker中的value／v-model关键字
    };
  },
  watch: {
    date(val) {
      if (val.length === 2) {
        // 注意：这里需要手动拷贝，不然修改日期过程中会修改原来的date数组
        // 深拷贝
        const newDate = JSON.parse(JSON.stringify(val));
        // 更新date数组
        this.date = newDate;
      }
    },
  },
};
</script>

这个代码示例中，我们实现了Vue组件的watch生命周期钩子，通过监听daterange类型选择器值变化的方法，手动拷贝一个新数组，并更新原数组，从而解决了无法回显的问题。