elementUi中的DateTimePicker 日期时间选择器回显问题

已于 2022-09-01 19:02:24 修改
阅读量5k 收藏 10
点赞数 5
分类专栏： vue 文章标签： elementui 前端 javascript
于 2021-12-06 16:35:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/songJunFeng1/article/details/121750125
版权
当Vue应用中属性更新未反映到视图时，可以使用`this.$set()`方法确保响应式更新。该方法向响应式对象添加新属性并触发视图刷新，尤其在回显日期或 datetimepicker 回显场景中。例如，通过`this.$set(this.date2, 0, newDate(res.data.effectDate))`和`this.$set(this.date2, 1, newDate(res.data.expiredDate))`来设置日期。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性

let date2 = [];
this.$set(this.date2,0,new Date(res.data.effectDate));//回显的日期
this.$set(this.date2,1,new Date(res.data.expiredDate))//回显的日期

新增页面和编辑页面可能为同一个问题，但是进行datetimepicker回显的时候会发现一个问题，就是回显之后再对timepicker面板进行操作时候，是不出发change时间，值也不会发生改变的

此时就要用到this.$set()方法进行暴力改变！

修改对象

this.$set(obj,'key',value)

unview DatetimePicker 选择器数据回显
时光淡然
03-23 2394
数据回显，正常情况下在mounted声明周期中就进行重新赋值应该就可以实现，但是在uni-app中，没有效果，需要使用页面声明周期函数。
关于vue中el-date-picker type=daterange日期不回显的问题
最新发布
程序猿熊躍暉的专栏
02-25 1694
然而，在实际开发过程中，特别是当涉及到日期范围的选择（daterange）并需要从前端展示后端返回的数据时，可能会遇到一些挑战。希望这篇文章能够帮助开发者们更加高效地处理类似的前端问题，提升用户体验的同时加速项目的开发进程。在构建现代化前端应用时，日期选择器是用户界面中一个不可或缺的部分。组件的值时，你可能会发现尽管设置了正确的值，但在页面上却看不到任何变化。这样不仅可以确保数据的实时性，还能增强用户体验。由于 Vue 的响应式机制，直接修改对象属性可能不会触发视图更新。组件时遇到的日期范围选择回显问题。
DateTimePicker 日期时间选择器 选中日期后不回显问题
qq_38401285的博客
06-28 4719
最近使用element-ui中的日期选择组件，发现选中日期却没有回显出来，但是提交到后台的日期数据却是正确的，即数据变了，视图没变。 经过反复查找，终于发现问题出在给实例对象增加新属性时，直接通过 ‘=’形式赋值是不会触发视图更新的，应该使用Vue.set给实例对象添加新属性。 例如： this.modeForm.validDate = [ response.startDate, response.endDate] this.modeForm是已经创建的实例对象，通过= 创建新属性，不会触发视图更新
element-ui时间选择器（DatePicker ）数据回显
zhangxueyou2223的博客
11-20 9630
需求：element-ui时间选择器（DatePicker ）数据回显，后台返回的数据，需要前台回显展示出来。绑定值的格式保持一致就可以回显，否则是不能回显的，我这里得到的数据格式是年月日时分秒，需要展示的是月份日期（yyyy-MM-dd），所以我给timePicker绑定值的格式也设置为yyyy-MM-dd。绑定值的格式转换成你要显示的格式，让你要回显的值和【保持一致就可以回显了！
Element-Plus中的DatePicker日期选择器数据回显
m0_74656262的博客
03-20 1599
Element-Plus中的DatePicker日期选择器数据回显
ElementUi DateTimePicker时间组件回显无法修改值的问题
qq_40298198的博客
04-27 700
回显时使用一下代码this.$set(对象，数组，数组值）
element时间选择器回显编辑
h_eader的博客
04-20 798
关于element的时间选择器（时间区间选择器 ） <el-date-picker v-model="visitForm.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"> </el-date-picker> data(){
关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
zhoushuizhang的博客
09-17 4563
一、简单说明 项目使用Vue+Element UI进行开发，使用了DateTimePicker 日期时间选择器。 二、问题描述 打开修改对话框（进行选择日期操作可以正常显示），在谷歌浏览器中初始化时能够显示日期和时间，但是一到IE浏览器中初始化时无法回填在显示框，不过控制台可以输出时间。 谷歌浏览器中： IE浏览器（11版）中： 三、解决方案 ...
elementUI 时间控件 DateTimePicker 自定义快捷时间 在ie中无法回调
Mayflyingdancing的博客
08-05 516
应用场景： 需要设置快捷时间：近一周、近一月、近三月，但是初始时间为当天0点，结束时间为当天23点59分59秒。 然后我就写了一段这样的： pickerOptions: { shortcuts: [{ text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTim
Element中Cascader 级联选择器设置默认值【编辑时的回显】
cos45sec的博客
01-07 7112
这里以Element-plus的示例为例 <template> <el-cascader v-model="value" :options="options" :props="{multiple: true}" filterable @change="handleChange"> <template #default="{ node, data }"> <span>{{ data.label }}</span>
给element datetimepicker 设置默认当前时间
qq_40565682的博客
12-18 3134
else里面就是设置默认当前时间15分钟后 watch: { row(val) { this.liveTime = [] // 当时间不为空时才回显 if (val.liveBeginTime && val.liveEndTime) { this.liveTime.push(new Date(val.liveBeginTime).format('yyyy-MM-dd HH:mm:ss')) // 回显开始时间
elementUi中的datatimepicker回显问题
qq_32801583的博客
08-13 3251
做web应用时，新增页面和编辑页面可能为同一个问题，但是进行datetimepicker回显的时候会发现一个问题，就是回显之后再对timepicker面板进行操作时候，是不出发change时间，值也不会发生改变的 此时就要用到this.$set()方法进行暴力改变！ 具体参考这位老板的：https://www.cnblogs.com/steamed-twisted-roll/p/1032309...
Element el-date-picker 表单校验和数据回显问题解决方法详解
pleaseprintf的博客
06-29 5847
在 Vue.js 开发中，使用 Element UI 组件库的 el-date-picker 组件可以方便地实现日期选择功能。然而，在表单校验和数据回显方面可能会遇到一些问题。本文将详细介绍如何解决 Element el-date-picker 组件在表单校验和数据回显过程中的常见问题。如果需要对 el-date-picker 进行更复杂的校验，可以自定义校验方法。data() {return {// 自定义禁用日期规则 return time . getTime() > Date . now();
关于element DatePicker 日期选择器编辑时回显错误的问题
麋鹿的鹿
10-08 1347
1.编辑时change事件不会触发，可以使用input事件。 <el-date-picker v-model="formData.startTimeEndTime" type="datetimerange" range-separator="至" value-format="yyyy-MM-dd HH:mm" star
Ant Design a-time-picker 时间回显问题 回显为Invalid date(使用moment来处理)
weixin_43962877的博客
05-21 790
【代码】Ant Design a-time-picker 时间回显问题 回显为Invalid date(使用moment来处理)
element-ui 组件DateTimePicker使用（选择今天及以后的范围+开始和结束时间分开传给后台+回显+编辑页面改变回显问题）
qq_38394175的博客
12-02 2993
vue文件 html <el-form-item class="" label="活动时间：" prop="activityTime"> <el-date-picker v-model="activityForm.activityTime" type="datetimerange" @change="timeChange" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false" rang
a-time-picker 时间回显问题 , `value` provides invalidate moment time
LavaStrom
07-09 2031
a-time-picker 时间回显问题 Warning: [antdv: DatePicker] value provides invalidate moment time. If you want to set empty value, use null instead. ant design vue中 时间选择器，需要使用到moment 安装moment 组件 引入moment 组件 回显的时候进行moment处理 （一）安装moment 组件 ```html npm install
element-plus时间选择器el-time-picker组件回显问题
jiaxiaohong_csdn的博客
12-07 4026
element-plus时间选择器el-time-picker组件回显问题； element-plus时间选择器没有value-format属性；
element-ui时间日期选择器回显功能以及不能修改问题的解决
m0_69502730的博客
10-27 3011
element-ui时间日期选择器回显功能以及不能修改问题的解决
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值