el-date-picker初始赋值后点不了

最新推荐文章于 2024-01-18 19:32:40 发布

原创最新推荐文章于 2024-01-18 19:32:40 发布 · 3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js #vue.js #javascript

收录于

本文讲述了在使用Element UI DatePicker时，如何正确为日期选择器设置默认值以确保其交互性的关键。作者分享了直接赋值导致的问题，以及通过this.$set解决方法，强调视图更新的重要性。

el-date-picker初始赋值后点不了

用element-ui的DatePicker 日期选择器时，需要显示默认值，所以需要初始赋值，开始我是直接赋值，如下

let date = new Date();
this.formData.energyYear= ''+date.getFullYear() //获取当前年

这样写后就只显示2021，然后选择就点不动了，没反应

最后才知道是赋值问题

let year=''+date.getFullYear()
this.$set(this.formData,'energyYear',year)

用this.$set赋值后，会进行视图更新，就能选择了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yangxx99

关注关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

VUE + ElementUI el-date-picker选中日期没反应

LEON_RAY

10-20

1万+

添加代码： @input="$forceUpdate()" 例： <el-date-picker v-model="value" type="date" value-format="yyyy-MM-dd" @change="getList" @input="$forceUpdate()" placeholder="选择日期"> </el-date-picker>

element 常见问题及解决办法

aibujin的博客

03-10

2162

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、el-date-picker 限制过去日期无法选择？1. Html2. js 前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。一、el-date-picker 限制过去日期无法选择？ 1. Html 代码如下（示例）： <el-date-picker v-model="time" type=

参与评论您还未登录，请先登录后发表或查看评论

Vue中使用this.$forceUpdate解决el-date-picker点击不显示问题

Coludidi的博客

08-30

4649

实际上是赋值的界面上并不渲染的问题，this.$set可解决这个问题，我们要说的 this.$forceUpdate() 对比较方便，推荐使用。

解决vue页面有多个＜el-date-picker＞时点击日期没有反应的问题

qq_51472580的博客

01-18

2283

今天写个页面要根据不同的角色显示不同的内容，于是乎用了多个if来控制页面，导致同一个页面还写了多个时间选择器，然后其中一个就不生效了，点击之后没有反应，选择器页面的日期也不更新，最后百度尝试了很多方法，记录一个最简单有效的，直接在属性里添加强制刷新！

解决el-date-picker change事件无响应问题

m0_63788547的博客

11-03

2931

解决el-date-picker change事件无响应问题

el-date-picker 设置、读取值

热门推荐

LitongZero的博客

03-08

4万+

el-date-picker 设置默认值记一个DateTimePicker 日期时间选择器的坑今天遇到一个问题。用日期时间选择器选择后，在编辑页面回显的问题。一、我们在取数据时在一般的输入框，我们都可以使用v-model中的值，直接赋值。可是这个时间选择器却不太一样，因为，他对应两个值，一个开始时间，一个结束时间，以数字的形式存在v-model中。取数据时，常常要这样二、在...

【前端】使用element时间选择器el-date-picker赋值无效解决方式

大白菜啊

04-21

1万+

解决element时间选择器el-date-picker赋值无效解决方式 value-format设定格式是 YYYY/M/D ，那么月份和日期分别是1-12、1-31 <el-date-picker v-model="operateDate" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date"

vue el-date-picker 直接赋值时控件失效

weixin_45535361的博客

07-04

2755

要处理这种情况，我们可以使用$ set()方法，既可以新增属性,又可以触发视图更新。

el-date-picker中picker-options踩坑

qq_34196357的博客

07-04

977

原因是使用=赋值，会修改formData数据存储地址，导致picker-options中使用的formData根据初始地址查找，得到初始化的formData.starDate数据，而重新选择了日期后，重新选择的日期数据存储到了新地址，导致picker-options失效。进行初始化，则此问题可解决。表单控件中，对日期进行限制：开始日期不能大于结束日期，结束日期不能小于开始日期;此处使用**=**对表单数据对象进行重新赋空值，导致日期的限制不能根据所选择日期进行限制，只会根据初始化的日期进行限制。

element表单中选择 el-date-picker 选择后没反应

KeepReal666的博客

11-17

1531

直接加上@input="$forceUpdate()"即可。

el-date-picker弹窗点击不显示，el-date-picker样式错误（不要轻信波浪线校验）

evennight的博客

07-31

1112

由此不要轻信校验规则，我验证了其他都没有问题才去查找历史，对比后怀疑这个，之前是绝对相信校验的波浪线。不仅仅显示样式不对，鼠标点击@change事件都不生效了，甚至弹窗也没有了，

vue组件之 el-date-picker 能下拉出样式，但是选择不了

weixin_42232639的博客

03-25

5363

开发过程中，测试反映，测试：这个时间组件新建的时候可以，怎么编辑的时候一直点不了，为什么选择不了时间，有bug啊！我：本地测试没问题呀，你再点点测试：就是选择不了，你过来看。 ... 走过去看，确实选择不了，于是我就开始找问题。一开始看console.log的报错是 getYear()， getMonth() is not function , 一开始找的是前端的问题，找了半天也就那么个回事，就一个组件会有啥问题呢？于是开始判断后端的问题：咦惹，突然就发现了，后端返.

多选TimePicker 时间选择器第一次不能选择解决Bug

weixin_43822237的博客

10-24

1406

实现一个添加时间，多选时间选择器 <el-form ref="form" :inline="true" :model="form" label-width='0px' v-if="dataForm.avilTime == '2'" :style='{"margin-left":"0px"}'> <el-button type="primary" @click="addBusinessTime" >添加</el-b

element-plus UI 中的el-date-picker组件在vue3项目中时间选择无反应解决方案

gxh0816的博客

09-29

3706

百度了以后发现原因是,element-plus版本太低了.我们是需要升级element-plus的版本就好了.这次的项目,是vue3+element-plus写的.今天突然发现,时间选择器里的时间点击没反应.可以到package-lock.json文件中查看element-plus版本号.1.先卸载版本低的element-plus。2.安装最新的element-plus。

el-date-picker 无法选择当前日期：解决方案参考和优化建议

你若盛开，清风自来

02-10

3338

是一个基于 Element UI 组件库中的一个日期选择器组件。它是一个功能强大、高度可定制的日期选择器，提供了丰富的选项和交互方式，可用于在前端实现日期的输入和选择。以下是关于为开发者提供了丰富的自定义样式和主题的选项，可以通过配置样式类名或者修改全局的主题变量来实现个性化的样式和视觉效果。总而言之，是一个功能丰富、高度可定制的日期选择器组件。通过 Element UI 提供的 API 和选项，开发者可以根据需要灵活地配置和定制的外观和行为，以满足项目的需求。

解决select 下拉框选择器 input输入框、时间日期选择器el-date-picker 赋值后，出现无法修改选中更改问题

凉城玖的博客

01-13

3657

ElementUI时间选择器,传入时间赋值后之后无法改变 // ElementUI的表格组件 <el-date-picker size="mini" style="width: 180px" default-value @change="limit_search

设置了elementui的时间日期组件的默认值导致DateTimePicke组件无法选择别的时间

weixin_45371730的博客

04-14

2258

使用this.$set()赋值，this.$set()赋值不会改变数据的响应式。target：要更改的数据源(可以是对象或者数组)一、问题：设置默认时间之后选择其他日期选不上。在修改时间发现，怎么也选不了其他的日期时间。关于this.$set()使用传值。key：要更改的具体数据。value ：重新赋的值。

解决date-picker切换日期无法赋值问题

X_W123的博客

12-02

1368

上班期间遇到element ui中事件控件date-picker大坑，需求要点击编辑进来绑定回显后端返回的值，之后再次选择日期发现无法选中，更离谱的是选中的回调函数毛线都没用～气死我了当时。就在这时我想起了度娘。于是我百度了下，按照某位大佬的写法来了一遍我靠惊呆了还真可以这个方法就是在初始化的时候用this.$set(要回显的变量，后端返回的值)。请看截图。 ...

Vue【element ui】使用moment导致el-date-picker点击无效

ZeroKoop

08-09

1536

Vue【element ui】使用moment导致el-date-picker点击无效

element el-date-picker日期选择器无效失效解决方法

monody666的博客

03-04

4962

//在组件中加入时间格式 value-format="yyyy-MM-dd HH:mm:ss"