vue el-date-picker 日期回显后无法改变问题解决

对于“vue el-date-picker 日期回显后无法改变问题解决”的完整攻略，可以分为以下几个步骤：

步骤 1：引入 el-date-picker 组件

首先，在组件中引入 el-date-picker 组件：

<el-date-picker v-model="date" type="date"></el-date-picker>

步骤 2：使用.watch()监听数据变化

接着，在组件中使用 .watch() 监听数据变化：

watch: {
  date(val) {
    console.log(val);
  }
},

步骤 3：使用日期格式化插件

接下来，为了更方便的处理日期，建议在项目中使用日期格式化插件，例如 moment.js：

import moment from 'moment';

步骤 4：在watch监听中进行逻辑处理

在 .watch() 监听中，可以触发逻辑处理，以处理回显日期无法更改的问题。例如：

watch: {
  date(val) {
    console.log(val);
    const newDate = moment(val).format('YYYY-MM-DD');
    this.date = newDate;
  }
},

以上步骤中，我们对日期进行了重新格式化，并将格式化后的日期赋值给 this.date，从而成功解决了回显日期无法更改的问题。下面提供两个具体的示例：

示例 1：在 created 中进行监听

在 created 生命周期中，我们可以添加对数据的监听，代码如下：

import moment from 'moment';
export default {
  data() {
    return {
      date: '2022/05/05'
    }
  },
  created() {
    this.$watch('date', (val) => {
      console.log(val);
      const newDate = moment(val).format('YYYY-MM-DD');
      this.date = newDate;
    })
  }
}

示例 2：在 mounted 中进行监听

在 mounted 生命周期中，我们也可以添加对数据的监听，代码如下：

import moment from 'moment';
export default {
  data() {
    return {
      date: '2022/06/06'
    }
  },
  mounted() {
    this.$watch('date', (val) => {
      console.log(val);
      const newDate = moment(val).format('YYYY-MM-DD');
      this.date = newDate;
    })
  }
}