el-date-picker赋值之后无法修改问题

最新推荐文章于 2025-04-22 17:18:02 发布
最新推荐文章于 2025-04-22 17:18:02 发布
阅读量1k 收藏
点赞数 6
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_74138212/article/details/135896665
版权
文章讲述了在项目开发中遇到的问题，即点击编辑按钮后如何将接口返回的时间正确赋值给组件，并解决赋值后无法修改时间的问题。作者分享了使用`this.$set`方法成功更新`ruleForm.totaltime`的解决方案。

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

记录一下自己的问题方便以后碰到及时查看

项目中有一个编辑按钮，点击编辑后需要把接口返回的时间赋值给它，但是发现赋值之后无法修改时间了

最开始我写的

this.ruleForm.totaltime = [res.data.start, res.data.end];

修改之后的

let alltime= [res.data.startAt, res.data.endAt];

this.$set(this.ruleForm, "totaltime", alltime);

这样就解决问题了

Vue3 - Element Plus 日期选择器DatePicker触发两次change事件问题，el-date-picker点击清空操作后change执行了2次（日期时间组件选中或删除已选出问题）
王二红
03-30 5726
vue3，element plus，DatePicker日期时间选择器组件，el-date-picker，DatePicker change事件触发两次，change事件触发两次事件，el-date-picker 清空时会调用两次接口，日期选择器清空后的回调，change没有调用，重复执行2次怎么办，如何限制只执行一次，强制要求只能触发一次，在选择日期范围时会触发两次change事件，当用户选择了范围的开始时，会立即触发一次 change 事件。而当用户选择了范围的结束时，又会触发一次 change 事件。
【element-ui】el-date-picker 组件 type=“monthrange“ 选择时间段操作异常
工作的日常记录和平凡的生活分享
04-30 676
但是看了所有的属性和方法都没有发现可以清除上次选择的值，也在网上各种搜索没找到解决办法，经过各种办法处理后得到了最简单处理方式,就是利用 key 值的变化重新渲染组件。如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed。如果不用key，Vue会用一种算法：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
解决Element中el-date-picker组件不回填的情况
01-21
1.问题描述 当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求，比如： 新建一个活动，需要定义活动的时间范围； 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成； 网页上出现了新建好的活动，其他人想查看详细信息，打开页面，发现时间区间并没有实现回填！ 2.问题分析 时间信息没有回填，首先要检查，后台数据返回情况以及页面上字段信息是否有差异等细节； 如果没有以上的情况，那就是我碰到的这种情况了， 后端数据返回没有差异，而且页面字段也没有错，其他的信息也正常回填，唯独时间不回填，同时也伴随一次回填后续不回填等诸多情况。总结来说就是：页面与数据
el-datepicker赋值之后不能再修改
weixin_42881232的博客
10-23 366
el-datepicker赋值之后不能再修改
el-date-picker时间范围 赋值报错问题
最新发布
ping
04-22 365
尝试对null值进行属性设置操作：修改一个数组的元素，但此时这个数组是null，而不是预期的数组类型。增加非空判断，确保在使用formList.timeRange之前，将其初始化为一个空数组[]点击时间范围组件右边清除图标，点击近6小时会把设置好的时间赋值给时间范围组件 但是出现报错。
vue elementUI 的el-date-picker 日期选择器赋值后无法更改日期-解决方案
qq_36657599的博客
02-10 977
VUE elementUI el-date-picker
el-date-picker 日期选择器 无法更改
前端攻城狮的博客
09-02 902
表格修改功能弹框，发现时间框数据无法修改
vue el-date-picker 日期选择 回显后成功后无法改变的解决办法
coldriversnow的专栏
11-16 4907
写前端日期选择的时候遇到一个很奇怪的问题，回显赋值后再次修改无法更新数据。回显时 //用这个方法赋值。
vue实战指南 vue中解决el-date-picker更改样式不生效问题
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-11 1334
在使用Vue.js进行前端开发的过程中，Element UI 是一个非常流行的UI库，它提供了一套完整的组件来快速搭建美观的用户界面。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。组件时遇到的样式覆盖难题。无论是初学者还是有经验的开发者，都能从中学到实用的技术和技巧，提升自己的Vue开发水平。在某些情况下，如果样式需要根据用户的交互动态变化，可以直接使用JavaScript来修改DOM元素的样式。的样式，可以使用Vue SFC中的深度选择器。
Element-Ui el-date-picker日期传值异常问题解决办法
科技向善
02-09 1961
另外，直接选择日期的时候，一般其实个Date对象，但是很多人会将myDate直接声明为’'，所以才会出现可能不能点选的问题，所以才会引入以上需要转化之类的操作。如果有多个变量嵌套的情况，则v-model先绑定到一个中介变量，然后通过watch中介变量，转换格式后，再对。然后增加一个方法在提交表单到后台的时候，用来转化日期对应到myDate成字符串类型，并且对应到java类。然后myDate在data()中是字符串类型。注意点选的日期会是Date()类型。a.b.c.myDate赋值。
element 日期选择器el-date-picker问题记录（清除后报错）
weixin_44237840的博客
08-11 1953
element日期选择器清除报错
解决select 下拉框选择器 input输入框 、时间日期选择器el-date-picker 赋值后，出现无法修改选中更改问题
凉城玖的博客
01-13 3540
ElementUI时间选择器,传入时间赋值后之后无法改变 // ElementUI的表格组件 <el-date-picker size="mini" style="width: 180px" default-value @change="limit_search
vue el-date-picker 日期回显后无法改变
m0_58565372的博客
04-10 1935
场景描述：点击修改，数据回显渲染，后端返回我的是startTime和endTime，我需要将其处理，放到一个数组里面，并将其赋值。这样写，就会出现问题，数据回显成功之后，无法改变，如下图。以上就能实现，如下图。
ElementUI DatePicker直接赋值回显后，无法更改与删除问题
也简的博客
04-10 1274
使用到e-date-picker直接赋值后，回显的值无法删除且也无法修改；DatePicker赋值后，回显无法删除与修改
elementUI 日期选择器赋值后无法更改日期-解决方案
weixin_61010608的博客
11-21 2033
elementUI 日期选择器赋值后无法更改日期--解决方案
el-date-picker 日期赋值选择回显后值无法改变，并且无法删除
妄想症患者的博客
10-27 3705
el-date-picker 日期赋值选择回显后值无法改变，并且无法删除
关于el-date-picker组件日期回显后改变日期不生效的问题
普通前端一枚
04-19 1324
从后端获取过来的日期数据，回显渲染成功，但是如果是改变日期却死活选不上。原本以为是数据类型的问题，但是反复调试不得解。后改变赋值方式就可以了，至于什么原因不是很明白，但是确实是能行了，在此记录防止以后再遇到。赋值的时候不要直接使用 =换成this.$set方式。
element-ui组件的 el-date-picker回显后，不能修改时间
weixin_52020362的博客
09-09 871
element-ui组件的 el-date-picker回显后，不能修改时间
el-date-picker无法赋值
08-04
el-date-picker无法赋值的原因可能是由于以下几个方面引起的： 1. 数据绑定问题：请确保v-model属性正确绑定了需要赋值的变量。在引用[1]中，v-model属性绑定了formData.planTime变量，而在引用[2]和引用[3]中，v-model属性绑定了operateDate变量。如果这些变量没有正确绑定，那么el-date-picker组件将无法正确赋值。 2. 日期格式问题：el-date-picker组件的value-format属性用于指定日期的格式。请确保value-format属性的值与需要赋值的日期格式一致。在引用[1]中，value-format属性的值是"yyyy-MM-dd HH:mm:ss"，在引用[2]中，value-format属性的值是"YYYY/MM/DD"，在引用[3]中，value-format属性的值是"YYYY/M/D"。如果赋值的日期格式与value-format属性的值不匹配，el-date-picker组件将无法正确解析日期。 3. 赋值方式问题：el-date-picker组件可以通过v-model属性直接赋值，也可以通过设置初始值来赋值。在引用[3]中，通过设置this.operateDate的值为["2022/1/1", "2022/1/31"]来赋值。请确保赋值的方式正确使用。 综上所述，如果el-date-picker无法赋值，请检查数据绑定、日期格式和赋值方式是否正确。如果问题仍然存在，请提供更多的代码和错误信息以便更好地帮助您解决问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值