elementui的时间选择器赋值后,不能改变它的值

最新推荐文章于 2022-09-09 16:14:54 发布
最新推荐文章于 2022-09-09 16:14:54 发布
阅读量8k 收藏 5
点赞数 5
分类专栏： Vue 文章标签： elementui时间选择器初始化赋值后 不能改变框内的值 elementui的下拉框赋值后 不能改变label值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web8_zhy/article/details/103136573
版权

项目中有一个需求,在进入页面时给el-date-picker赋值一个初始时间.如图
在这里插入图片描述
created时执行getNowMonth函数
在这里插入图片描述
这时候页面赋值成功
在这里插入图片描述
但是这里不能清除,切换时间也不能改变时间框内的值
问题及解决方法:
data里的searchForm没有定义kssj和jssj,一开始我写的searchForm是一个空对象.
一定要定义一下,如图
在这里插入图片描述
还有第二种方法:
用Vue的set方法赋值,写法如下
this.$set(this.searchForm,‘kssj’, ‘你的值’)

云缨·
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
layui给下拉框、按钮状态、时间赋初始值的方法
10-16
今天小编就为大家分享一篇layui给下拉框、按钮状态、时间赋初始值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
11-22
下拉框一改变，弹出框出现，选择弹出框中的值会赋值给下拉菜单 二、代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Subscribe策略&...
解决select 下拉框选择器 input输入框 、时间日期选择器el-date-picker 赋值后，出现无法修改选中更改问题
凉城玖的博客
01-13 3377
ElementUI时间选择器,传入时间赋值后之后无法改变 // ElementUI的表格组件 <el-date-picker size="mini" style="width: 180px" default-value @change="limit_search
ElementUI时间选择器赋值后无法改变
weixin_39939973的博客
07-30 3586
ElementUI时间选择器,传入时间之后无法改变 表格代码片段: // ElementUI的表格组件 <el-date-picker size="mini" style="width: 180px" default-value @change="limit_s
vue el-date-picker回显问题和回显之后值无法改变的问题
热门推荐
java小白白之没有最白的博客
11-09 3万+
如题，遇到这种问题直接用this.$set()传值就可以了 具体如下 el-date-picker组件 <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="上课时间" prop="manageTime"> <el-date-picker clearable="true"
elementUI el-time-picker重新赋值之后，再选择日期不更新问题
Z姑娘早安
09-14 1419
拿到编辑数据赋值给time-picker的v-model async handleEdit(index, row) { this.editType = row.itemType const data = await fetchDomainItemQueryById ({clusterId: this.treeNode.id,itemType: row.itemType,itemId: row.itemId}) this.form = data.data
element中select、DateTimePicker等组件，页面初始化设值后无法再赋值的问题
前端开发一枚
02-19 688
问题场景：页面初始化时给组件中data中的值绑定数据，再次设置时组件无效 通过this.$set设值即可解决
【前端】使用element时间选择器el-date-picker赋值无效解决方式
大白菜啊
04-21 9561
解决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"
仿IPhone时间选择器
07-24
"仿IPhone时间选择器"就是一个旨在提升Android应用界面质量的组件，它模仿了iOS系统的时间选择器样式，使得Android用户也能享受到类似iOS的交互体验。这个组件通常用于让用户方便地选取小时、分钟或者日期等时间信息...
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
11-29
通过遵循上述原则，我们可以有效地避免在使用EasyUI时遇到控件赋值后不显示的问题。同时，不断学习和熟悉EasyUI的文档，可以帮助我们更深入地理解和使用这个强大的前端框架，提升开发效率和用户体验。
问题：datetimepicker 选中时间后，input框没有值
天蓝丶彼岸的博客
10-11 5774
问题描述：bootstrap模态框中用到datetimepicker，点击确定时间后，input框中没有值 原因：首先，模态框在关闭前我把form表单中的数据重置了 //模态框 关闭事件 $('#roadSectionAddOrUpdateModel').on('hide.bs.modal', function () { $('#roadSectionAUForm'...
vue之element日期选择器设置初始值后修改失效
qq_38734862的博客
04-30 5419
代码截图： 这样赋值后发现时间改变不了了，@chang事件也不会响应，然后我以为是赋值时new Date()的问题去除了还是不行，网上很多人是这么指导的，但是他们基本都是和官方案例一样，不是写在对话框内的，就是单独一个时间选择器这样的话直接this.formInline.dataTime = [res.startTime, res.endTime]赋值就可以了，改变也是没问题的。 那么如果...
解决date-picker切换日期无法赋值问题
X_W123的博客
12-02 1050
上班期间遇到element ui中事件控件date-picker大坑，需求要点击编辑进来绑定回显后端返回的值，之后再次选择日期发现无法选中，更离谱的是选中的回调函数毛线都没用～ 气死我了 当时。 就在这时 我想起了度娘。于是我百度了下，按照某位大佬的写法来了一遍 我靠 惊呆了 还真可以 这个方法就是在初始化的时候用this.$set(要回显的变量，后端返回的值)。请看截图。 ...
【element UI】解决el-date-picker选择日期后视图不更新的问题，亲测有效
蓦然一笑的博客
09-09 9647
解决el-date-picker选择日期后视图不更新的问题，亲测有效。 date-picker日期选择器重新赋值后再点击日期进行选择，却发现视图没有更新**，提交后反而会显示修改后的结果。 最后通过this.$forceUpdate()强制更新解决问题！！！
el-date-picker编辑时无法调用change
小橙的博客
02-27 4011
新增时，有触发change,但是编辑时，有原来的值，不触发change 参考
element-ui datepicker IE下v-modal首次赋值不刷新问题(已解决)
u011050541的专栏
04-18 1512
IE兼容性bug，具体分析过程就不说了，直接说解决方案 1.给datepicker加个ref值 <el-date-picker ref="mypicker" v-model="dateValue" placeholder="请选择日期"></el-date-picker> 2.日期赋值之前强制给组件userInput属性赋值为null this.$refs.mypicke...
解决Element-ui 日期时间组件修改不更新问题
前端打工人的博客
09-27 3665
<el-date-picker v-model="formData.answers.time" @input="daterangeChange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picke
el-date-picker时间范围组件有默认值更新不生效问题（element-ui）
Dong_Zi8的博客
03-28 1556
<el-form-item> <el-date-picker v-model="form.dateTime" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" type="datetimerange" @input="dateRangeChange()" .
Laravel+element-ui日期选择器接收数据赋值后无法操作问题
鱼儿锅头的博客
01-22 298
最近项目上用detail返回日期给element-ui上的日期选择器组件后，数据展示是正确的，但是无法进行后续操作，以下展示遇到的问题 通过detail接口返回的时间 model绑定的值 赋值 这样的数据展示是没有问题的 但是当我们重新选择值之后，值没有变化，change也没有变化，试了半天才发现是赋值的问题，普通的直接赋值他无法重置，只能通过使用this.$set()的形式 这种方式赋值后问题就直接解决了‘’ ...
elementui时间选择器回显
最新发布
08-10
要实现 ElementUI 时间选择器的回显，你可以使用 v-model 指令来绑定一个日期数据，并在需要回显的时候将该日期数据传递给时间选择器的 value 属性。下面是一个示例代码： ```html <template> <div> <el-date-picker v-model="selectedDate" type="datetime" placeholder="选择日期时间" ></el-date-picker> <button @click="echoSelectedDate">回显日期</button> </div> </template> <script> export default { data() { return { selectedDate: null // 初始化选中的日期为 null }; }, methods: { echoSelectedDate() { // 在需要回显的时候，将日期数据传递给时间选择器的 value 属性 this.selectedDate = new Date(); // 假设这里使用当前日期时间作为回显的示例 } } }; </script> ``` 在上面的示例代码中，我们使用了一个按钮来触发回显操作，点击按钮后将当前日期时间赋值给 `selectedDate`，时间选择器会自动回显该日期。 请注意，我们使用了 `type="datetime"` 来指定时间选择器的类型为日期时间选择器，你可以根据自己的需求选择其他类型。另外，你还可以根据具体场景和需求对时间选择器进行进一步的配置和样式调整。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值