<el-date-picker>赋值回显后无法修改

如果在 `<el-date-picker>` 组件中赋值后无法修改，可能是因为你在绑定 `v-model` 的同时，也设置了 `:default-value` 或 `:value` 属性，导致默认值或初始值始终保持不变。你可以尝试移除 `:default-value` 或 `:value` 属性，只使用 `v-model` 来进行数据的双向绑定。另外，你也可以在需要修改日期时，通过改变 `v-model` 的值来更新日期。

例如：

<template>
  <div>
    <el-date-picker v-model="date"></el-date-picker>
    <el-button @click="changeDate">修改日期</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: ''
    }
  },
  methods: {
    changeDate() {
      this.date = '2021-09-01'; // 修改日期
    }
  }
}
</script>

在上面的例子中，我们只绑定了 `v-model`，并且通过 `changeDate` 方法来更新日期。

相关问题

el-date-picker 回显

el-date-picker组件的回显可以通过v-model指令绑定数据实现。在Vue的实例中，给v-model绑定一个变量，该变量的值会自动同步到el-date-picker组件中。当需要回显数据时，只需要将数据赋值给v-model绑定的变量，el-date-picker组件就会显示相应的日期。具体实现可以参考以下代码：

<el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>

data() {
  return {
    date: '' // 初始化变量
  }
},
methods: {
  showDate(row) {
    this.date = row.date; // 将回显的日期赋值给date变量
  }
}

在上述代码中，v-model指令绑定的变量为date，当需要回显日期时，只需将相应的日期赋值给date变量，el-date-picker组件就会显示该日期。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* [【VUE】el-date-picker日期选择器回显](https://blog.csdn.net/liusuihong919520/article/details/126890074)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
- *2* [Element el-date-picker表单校验和数据回显问题](https://blog.csdn.net/Web_chicken/article/details/120073888)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
- *3* [Vue 日期控件(el-date-picker)回显异常及其原理分析](https://blog.csdn.net/vipshop_fin_dev/article/details/108367899)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]

el-date-picker回显

el-date-picker组件的回显可以通过以下几种方式实现:

1. 可以在change事件中将后端获取的开始日期和结束日期赋值给v-model绑定的数组，例如:

dataChange() {
  // 假设后端返回的开始日期和结束日期分别为startDate和endDate
  this.form.dateTime = [startDate, endDate];
}

2. 可以使用this.$set方法将后端获取的开始日期和结束日期赋值给v-model绑定的数组，例如:

this.$set(this.form, "dateTime", [startDate, endDate]);

3. 可以直接使用push方法将后端获取的开始日期和结束日期添加到v-model绑定的数组中，例如:

this.form.dateTime.push(startDate);
this.form.dateTime.push(endDate);

以上是el-date-picker组件回显的几种方式，根据具体情况选择合适的方法即可。