【element-ui】el-date-picker数据回显成功，修改日期后强制渲染/更新

最新推荐文章于 2024-07-07 15:29:40 发布
最新推荐文章于 2024-07-07 15:29:40 发布
阅读量3.9k 收藏
点赞数 1
分类专栏： element-ui 文章标签： vue 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41612593/article/details/107153974
版权 
<el-date-picker
	v-model="form.validateTime"
	value-format="yyyy-MM-dd HH:mm:ss"
	type="daterange"
    range-separator="至"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	@change="$forceUpdate()"        //强制渲染
></el-date-picker>
一棵星星
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element el-date-picker 表单校验和数据回显问题解决方法详解
pleaseprintf的博客
06-29 4994
在 Vue.js 开发中，使用 Element UI 组件库的 el-date-picker 组件可以方便地实现日期选择功能。然而，在表单校验和数据回显方面可能会遇到一些问题。本文将详细介绍如何解决 Element el-date-picker 组件在表单校验和数据回显过程中的常见问题。如果需要对 el-date-picker 进行更复杂的校验，可以自定义校验方法。data() {return {// 自定义禁用日期规则 return time . getTime() > Date . now();
elment UI el-date-picker 数据更新，但是视图没有更新选中的日期
qq_33911541的博客
06-30 1317
el-date-picker 数据更新
vue+antd 日期选择器自定义渲染
weixin_44758453的博客
05-16 589
<a-date-picker v-model="formData.date" placeholder="请选择日期" @change="onChange" @ok="onOk" > <span>{{ formData.da...
前端恋曲：el-date-picker组件，选择令人心动的日期范围
最新发布
m0_46259935的博客
07-07 1045
本文介绍了el-date-picker组件中pickOptions的强大之处，并通过一个需求场景，用代码逐步进行了需求分析和代码说明，为实现类似场景提供参考和帮助。
el-date-picker回显问题解决记录
qq_41421033的博客
08-02 2176
偶然性解决问题, 还存在很多疑点, 由于项目比较赶, 已解决问题为目的做个记录, 以后回来筛查原因。回显事件赋值时无法回显, 数据都能拿到但是视图没有变化, 实际显示的是空时间。
element ui 中 el-date-picker 时间选择器选择完成不渲染出来
KingShy1的博客
08-24 5034
element ui 中 el-date-picker 时间选择器选择完成不渲染出来 el-date-picker里面有change事件，但是：当你选中的值和你之前的值是一样的话是不触发的。 当你数据结构很多层的时候也会很难触发数据，渲染到页面上的。 解决办法 el-date-picker 里面选择时间的时候会触发input的事件的，所以在我们事件里面直接调用强制刷新页面的方法（$forceUpdate）来刷新数据，就可以了！ 代码如下： html： <el-date-picker
Vue 日期控件(el-date-picker)回显异常及其原理分析
一群专业码农的笔记本
09-02 9137
Vue 日期控件(el-date-picker)回显异常及其原理分析 最近在跟一个项目，项目用的element-ui + vue ，做一个新功能的时候，用element-ui的diolag作为一个弹出层，用于数据的新增以及修改，diolag中用了el-date-picker日期控件，首次选择新增完成后，不管是再次新增或者修改，重新选择日期回显都无法改变视图显示时间，但其value已经更新。 代码如下： <el-date-picker v-model="rentalForm.rentSd" typ
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
最全 element UI el-date-picker组件换色（less）
11-23
element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器
vue-ctk-date-time-picker:VueJS组件选择日期和时间，包括范围模式
04-13
查找v1文档暗模式演示版安装纱yarn add vue-ctk-date-time-picker NPM npm i --save vue-ctk-date-time-picker用法ES6模块/ CommonJS import VueCtkDateTimePicker from 'vue-ctk-date-time-picker' ;import 'vue-...
解决Element中el-date-picker组件不回填的情况
01-21
1.问题描述 当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求，比如： 新建一个活动，需要定义活动的时间范围； 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成； 网页上出现了新建好的活动，其他人想查看详细信息，打开页面，发现时间区间并没有实现回填！ 2.问题分析 时间信息没有回填，首先要检查，后台数据返回情况以及页面上字段信息是否有差异等细节； 如果没有以上的情况，那就是我碰到的这种情况了， 后端数据返回没有差异，而且页面字段也没有错，其他的信息也正常回填，唯独时间不回填，同时也伴随一次回填后续不回填等诸多情况。总结来说就是：页面与数据
element 选择日期范围 后台回显
qq_44641517的博客
02-10 1119
后台返回来的数据显示在日期选择范围的组件上 其实很简单 <el-date-picker v-model="params" type="daterange" align="right" unlink-panels ...
elementui dateRange 回显修改无效
weixin_53329387的博客
07-13 190
开发中坑合集
vue数据强制更新的办法
蓝胖子的博客
01-04 1622
vue数据强制更新的办法
el-date-picker回显的问题
m0_61689817的博客
04-06 449
今天写el-date-picker的时候发现一个问题，选择日期后再页面引用显示出来是这样的。代码用的官网的代码，引用用的{{value}}
element ui form 时间选择器，初始时间值后，再改变时间, value未更新的解决办法
sinat_38692453的博客
11-16 904
element ui form datepicker
【el-date-picker】踩坑记，回显不显示及赋默认值不回显问题
花椒和蕊的博客
10-13 8914
日期组件踩坑记
【笔记】ElementUI 组件的使用--选择日期，选择不了或者不回显
热门推荐
hr952909686的博客
06-23 1万+
1.错误：vue，ElementUI 组件的使用：选择日期，选择不了或者不回显传入的日期格式不正确导致的// if (!isEmptyObject(row.meetingDate) &amp;&amp; !isEmptyObject(row.endTime)) {// row.meetingTime[1] = new Date(row.meetingDate + ' ' + row.endTi...
element-ui el-date-picker 如何设置 daterange 的日期格式
07-12
对于 element-ui 的 el-date-picker 组件来说，要设置 daterange 的日期格式，可以通过设置 picker-options 属性来实现。具体步骤如下： 1. 在 el-date-picker 组件上添加 picker-options 属性，值为一个对象。 ```html <el-date-picker v-model="dateRange" type="daterange" :picker-options="pickerOptions" ></el-date-picker> ``` 2. 在组件的 data 中定义 pickerOptions 对象，设置其属性 disabledDate 和 shortcuts。 ```javascript data() { return { dateRange: [], // 存储选择的日期范围 pickerOptions: { disabledDate(time) { // 自定义禁用日期的逻辑，可根据需求进行修改 return time.getTime() > Date.now(); }, shortcuts: [ { text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); } }, { text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); } } ] } }; } ``` 在以上代码中，disabledDate 函数用于自定义禁用日期的逻辑，可以根据需求进行修改。shortcuts 属性用于设置快捷选项，通过 onClick 函数设置快捷选项的点击事件逻辑。 通过以上步骤，即可设置 el-date-picker 组件的 daterange 的日期格式以及其他相关配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值