el-date-picker 日期不回显
时间: 2023-10-06 22:09:34 浏览: 73
你好!关于`el-date-picker`日期不回显的问题,可能是因为你没有正确设置`v-model`或者`value`属性。请确保你已经正确绑定了日期的值。
例如,你可以使用`v-model`来绑定一个变量来保存选择的日期值,然后在界面上使用这个变量来显示选择的日期。
```html
<template>
<div>
<el-date-picker v-model="selectedDate" type="date" placeholder="选择日期"></el-date-picker>
<p>选择的日期:{{ selectedDate }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedDate: '', // 绑定选择的日期
};
},
};
</script>
```
在上面的示例中,`selectedDate`变量绑定了选择的日期,然后在界面上使用插值表达式`{{ selectedDate }}`来显示选择的日期。
请确保你已经正确地设置了这些属性,如果问题仍然存在,请提供更多的代码或具体的错误信息,以便我能够更好地帮助你解决问题。
相关问题
el-date-picker日期不回显
el-date-picker日期不回显的问题可能是由于绑定的v-model值已经改变,但是控件中没有实时更新导致的。解决这个问题的方法有两种。一种是在input方法中使用this.$set方法进行数据的更新,另一种是直接使用this.$set方法给v-model赋值。
具体操作可以参考以下代码示例:
```html
<el-date-picker v-model="formObj.formModel.deadTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @input="testClick"></el-date-picker>
```
在input方法中使用this.$set方法进行数据的更新:
```javascript
methods: {
testClick(newVal) {
this.$set(this.formObj.formModel, "deadTime", newVal);
}
}
```
或者直接使用this.$set方法给v-model赋值:
```javascript
methods: {
testClick(newVal) {
this.$set(this.formObj, "formModel", { deadTime: newVal });
}
}
```
以上方法都可以解决el-date-picker日期不回显的问题。如果还有其他问题,请提供更多相关信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue.js中el-data-picker中type="daterange"修改日期的时候数据不回写的问题。](https://blog.csdn.net/wszhm123/article/details/97800087)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [el-date-picker选择后页面没有回显](https://blog.csdn.net/oldolder/article/details/125871547)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
el-date-picker怎么回显日期
对于 el-date-picker 组件,要回显日期,你可以通过 v-model 指令来绑定一个数据变量,然后将回显的日期赋值给这个变量即可实现回显。
首先,你需要在 data 中声明一个变量来存储日期的值,例如:
```javascript
data() {
return {
selectedDate: '', // 存储选择的日期
};
},
```
然后,在 el-date-picker 组件上使用 v-model 指令将选中的日期绑定到该变量:
```html
<el-date-picker v-model="selectedDate" />
```
现在,你可以在 selectedDate 变量中获取和设置选择的日期。如果要回显日期,只需将要回显的日期赋值给 selectedDate 即可,例如:
```javascript
this.selectedDate = '2022-01-01'; // 回显日期为 2022 年 1 月 1 日
```
当你设置 selectedDate 的值时,el-date-picker 组件会自动更新并显示该日期。
注意:el-date-picker 组件的回显日期需要符合指定的格式。在上面的示例中,日期的格式为 `'yyyy-MM-dd'`,你可以根据自己的需求调整格式。
希望能帮到你!如果有任何疑问,请随时提问。