使用Element-ui 中el-time-picker赋值后无法修改问题

最新推荐文章于 2024-03-25 01:23:07 发布

公牛梵高

最新推荐文章于 2024-03-25 01:23:07 发布

阅读量537

点赞数 8

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/wangxvnan/article/details/134853455

版权

引用自：https://www.cnblogs.com/zaijin-yang/p/15648349.html

这是正常赋值方式:

this.form.startTime = item.warnValue.split('-')[0]
this.form.endTime = item.warnValue.split('-')[1]

赋值已经成功,但是修改值的时候组件显示的值并没有修改.

修正后代码:

this.$set(this.form, 'startTime', item.warnValue.split('-')[0])
this.$set(this.form, 'endTime', item.warnValue.split('-')[1])

赋值成功并且可以修改.

优惠劵

公牛梵高

关注关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
使用Element-ui 中el-time-picker赋值后无法修改问题

使用Element-ui 中el-time-picker赋值后无法修改问题
复制链接

扫一扫

vue-ctk-date-time-picker:VueJS组件选择日期和时间，包括范围模式

04-13

VueCtkDateTimePicker 用于选择日期（可用范围模式）和时间的Vue组件本文档适用于v2。*。查找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-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css' ; Vue . component ( 'VueCtkDateTimePicker' , VueCtkDateTimePicker ) ; < VueCtkDateTimePicker

vue element-ui el-date-picker限制选择时间为当天之前的代码

10-16

主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

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

Element-UI中el-time-picker时间选择器无法选择

热门推荐

m0_37678652的博客

08-16

1万+

在时间选择器使用时，因为ElementUI官方默认选择器打开时的默认时间是当前时间，当我们需要手动设置一点击该选择器展现的默认时间时，官方也提供了dafault-value属性，如下图：该值绑定的是一个Date对象可被解析，所以我们可以默认绑定属性，通过在VUE渲染完成时给该属性赋值，这样就可以解决打开timePicker时自定义默认值的问题。 // 1.在data中定义属性 data{ defalutValue: null } // 2.将该属性绑定到对应的timePicker上 &l.

当使用element中的日期选择器el-time-picker，时间选不上

m0_52244931的博客

11-21

4098

当使用 el-time-picker 时 v-model绑定的 formInline.value1 默认值要是为空数组 [] ,则这个时间选择器滑动选择时间是有问题的，可以在数组中设置默认时间，解决这个问题，但是当这个组件时查询框的时候首次是不应该存在默认值的这时候就可以将 value1 初始化为 null

element ui el-time-picker组件赋值 (HH:ss) 后界面不显示

贵林之恋的博客

04-12

885

调用：this.converTime("22:20")解决办法：字符串转date。

el-time-picker回显导致数据无法更新

LD喂！的博客

03-26

698

写项目时遇到一个奇怪的问题,在网上找了半天发现都没有可解决的方法,这里记录下解决方法防止以后忘记了 let start = new Date() let end = new Date() let arr = [start, end] //使用这种方法赋值回显才能正常更新数据 this.$set(this.dialogInfo,'timeList',arr); ...

elementUI时间选择器不能修改时间的问题

C_TopTopTop的博客

10-30

1588

项目中使用到了，时间日期选择器。新建的时候一切正常，但是在修改的时候时间选择不上，回显不了，但是保存的时候已经保存上了。实际情况是，打开控制台的vue调试发现，model已经修改，但是页面的view数据却没有修改。 // item.dataTime=arrayObj //之前的 this.$set(item,'dataTime',arrayObj)//修改以后修改以后回显 ...

el-date-picker 英文改中文.doc

11-18

https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载

解决Element中el-date-picker组件不回填的情况

01-21

1.问题描述当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求，比如：新建一个活动，需要定义活动的时间范围；因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成...

最全 element UI el-date-picker组件换色（less）

11-23

element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器

vue el-date-picker 直接赋值不生效、数据绑定无效

s_156的博客

03-22

1241

例如：当直接给form.expireTime 赋值是 form.expireTime = value ，界面没有变化。但是form.expireTime值已经更新了。原理：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。 this.$set(for

[【前端】element-ui的时间组件＜el-time-picker＞出现无法选择或无法滚动的解决思路

SouthNAN的博客

09-22

5686

一个Java菜鸟的前端笔记问题描述：时间组件<el-time-picker>无论是新增和编辑均出现无法选择或无法滚动的情况，并且在返回详情时组件是能够成功回显已保存的时间数据的，但就是无法修改组件 <el-form-item v-if="showMore" label="营业时间" prop="rangeTime"> <el-time-picker is-range value-format="HH:mm:ss" v-mo

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

weixin_45535361的博客

07-04

2245

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

023：vue中解决el-date-picker更改样式不生效问题

大剑师兰特的GIS世界

08-21

1712

在vue项目开发中，我们打算保持颜色的一致性和协调性，修改 el-date-picker下拉列表中的默认选中颜色，选框的颜色，如果仅仅是修改css，是不能改变颜色的，需要做出一定的改变。

vue el-date-picker 日期回显后无法改变

m0_58565372的博客

04-10

1637

场景描述：点击修改，数据回显渲染，后端返回我的是startTime和endTime，我需要将其处理，放到一个数组里面，并将其赋值。这样写，就会出现问题，数据回显成功之后，无法改变，如下图。以上就能实现，如下图。

怎么给el-date-picker赋值

08-24

对于 element-ui 的 el-date-picker 组件，你可以使用 v-model 或者通过 ref 属性来给它赋值。使用 v-model 的方式： ``` <el-date-picker v-model="date"></el-date-picker> ``` 在你的 Vue 实例中，声明一个名为 `date` 的 data 属性，然后就可以在这个属性上进行赋值和获取值的操作了。使用 ref 的方式： ``` <el-date-picker ref="datepicker"></el-date-picker> ``` 在你的方法中，可以通过 `this.$refs.datepicker` 来访问该组件的实例，然后使用实例的 `value` 属性来进行赋值： ``` this.$refs.datepicker.value = '2022-01-01'; ``` 或者使用实例的 `setValue` 方法： ``` this.$refs.datepicker.setValue('2022-01-01'); ``` 这样就可以给 el-date-picker 组件赋值了。记得在适当的时机使用这些方法来设置初始值或者动态改变值。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交