[记录贴]：Element_ui关于日期组件选择回显问题

最新推荐文章于 2024-04-19 09:55:01 发布
原创 最新推荐文章于 2024-04-19 09:55:01 发布 · 2.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文记录了解决Element-UI的el-date-picker组件在选择日期后不立即回显的问题。作者发现在created钩子中初始化日期时，由于未在data()内声明positionDate，导致Vue的双向绑定无法即时更新视图。解决方案是在data()中声明prop的值。

之前用element-ui的 el-date-picker 组件碰到问题 记录一下

进入页面后，我先在created钩子方法里先获取后端传入的日期显示到组件中，之后发现个问题就是，再进行日期选择，选择的日期不会回显，或者会延迟显示，百度了好久也没找到解决方法

最后发现 positionDate 没有在data()里面声明，导致回显有延迟，vue是双向绑定，要在data()里面声明才可以立刻刷新。

解决方法：prop的值需要在data()里面声明
在这里插入图片描述

Element-ui Cascader 级联选择器回显数据
大漠孤烟
02-04 2484
回显的方式 两种情况： 1.直接使用JSON回显（针对于每个人看到的菜单一致，数据库直接保存数据JSON串，直接回显） 2.保存最后一位，递归回显 （针对于每个人看到的菜单不一样，有的人能看到两级，有的人能看到三级，只保存最后一位，然后前端做一下处理） 以下代码中的变量含义： resultJson：要回显的JSON串 navList：级联JSON数据（菜单父子结构数据） navIds：数据库保存的 2，3，4（需要回显的最后一位ID数组） 直接使用JSON回显 ，数据库保存数组JSON串，回显
Element el-date-picker 表单校验和数据回显问题解决方法详解
pleaseprintf的博客
06-29 6058
在 Vue.js 开发中，使用 Element UI 组件库的 el-date-picker 组件可以方便地实现日期选择功能。然而，在表单校验和数据回显方面可能会遇到一些问题。本文将详细介绍如何解决 Element el-date-picker 组件在表单校验和数据回显过程中的常见问题。如果需要对 el-date-picker 进行更复杂的校验，可以自定义校验方法。data() {return {// 自定义禁用日期规则 return time . getTime() > Date . now();
elementui date-picker日期组件 日期回显失效、change事件失效
热门推荐
HuafuCsdn的博客
09-10 1万+
问题： v-model回显失效，使用el-date-picker组件选择日期后，无法在输入框内回显，检查发现绑定的值确实正确、格式也没有问题，但没有回显内容 官方文档说明的change事件就是不触发 有clearable属性控制清空选择内容，但是没有对应的clear事件 解决： 使用v-bind:value回显，手写事件改变选择日期后对应的值（需要预先声明日期范围对应的属性为数组，对应位置上的值为空串，在事件中使用$set更改） ...
【vue】elementui中，el-date-picker组件只能选择当前年份中的日期
m0_63834711的博客
12-16 9991
撒花✿。
Date时间格式只显示年月日，没有时分秒
weixin_65884708的博客
06-09 1639
这个是因为数据库字段设置原因，把原来的date类型改成datetime类型，就可以显示出年月日-时分秒的形式了。
js获取当前时间，初始化MUI时间选择器picker
weixin_33924770的博客
02-24 512
为什么80%的码农都做不了架构师？>>> ...
vue el-date-picker 日期选择 回显编辑修改后无法改变回显值的解决方案
oWaitForYou的博客
10-20 3753
vue el-date-picker 日期选择 回显编辑修改后无法改变回显值的解决方案 公司无前端，本人前端后端一起搞，遇到的问题记录下来，帮助遇到同样的问题兄弟姐妹们
详解关于element级联选择器数据回显问题
10-17
总结来说，解决 Element UI 级联选择器数据回显问题的关键在于： 1. 理解级联选择器的数据结构，包括 `value`、`label` 和子级 `children` 的定义。 2. 在编辑或更新表单时，将后端返回的数据（通常是 ID）转换为...
关于element ui --Select 选择器回显问题
very nice
07-09 8411
关于element ui --Select 选择器回显问题
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
Element-UI是一款基于Vue.js的高质量UI组件库，提供了丰富的组件供开发者构建用户界面。 ### 1. 级联菜单组件（Cascader） `<el-cascader>`是Element-UI用于创建级联选择器的组件。在示例代码中，我们看到`v-model...
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
el-date-picker如何回显
weixin_51722520的博客
10-25 2299
el-date-picker不回显时间
关于el-date-picker组件日期回显后改变日期不生效的问题
普通前端一枚
04-19 1410
从后端获取过来的日期数据，回显渲染成功，但是如果是改变日期却死活选不上。原本以为是数据类型的问题，但是反复调试不得解。后改变赋值方式就可以了，至于什么原因不是很明白，但是确实是能行了，在此记录防止以后再遇到。赋值的时候不要直接使用 =换成this.$set方式。
element-ui 列表中的时间展示去掉时分秒只展示2020-03-20
qq_41781984的博客
08-24 4373
element-ui 列表中的时间展示去掉时分秒只展示2020-03-20 <el-table-column prop = "buildTime" :formatter="formatterTime"/> 在methods里面 formatterTime(row,column){ let data = row[column.property] return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data ) } ...
element-ui时间选择器（DatePicker ）数据回显
爱就码上行动，奔赴热爱，追光而行。愿你带着从容与热爱，拥抱每一天的惊喜与美好
11-20 9751
需求：element-ui时间选择器（DatePicker ）数据回显，后台返回的数据，需要前台回显展示出来。绑定值的格式保持一致就可以回显，否则是不能回显的，我这里得到的数据格式是年月日时分秒，需要展示的是月份日期（yyyy-MM-dd），所以我给timePicker绑定值的格式也设置为yyyy-MM-dd。绑定值的格式转换成你要显示的格式，让你要回显的值和【保持一致就可以回显了！
elementUi中的DateTimePicker 日期时间选择器回显问题
songJunFeng1的博客
12-06 5114
当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 let date2 = []; this.$set(this.date2,0,new Date(res.data.effectDate));//回显的日期 thi
element-ui 时间组件datePicker开始时间小于结束时间的校验，时分秒校验问题。
m0_38105640的博客
10-12 4950
一、安装引入element-ui npm i element-ui -S 完整引入 在 main.js 中写入以下内容： import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render:
记录：vue+element：DateTimePicker 不能选择当前时间前的时间（包括时分秒）
weixin_50622621的博客
07-06 2336
在项目中遇到的，限制不能选着比当前时间小的日期时间（包括时分秒），添加时间区间选择，使用了moment插件。
如何解决Element UI中的select组件在回显数据时短暂闪烁的问题
最新发布
12-16
在Element UI的`el-select`组件中，当试图回显数据时可能出现闪烁或显示空白的情况，这通常是因为`v-model`绑定的数据在初始化时未设置或值为空。为了解决这个问题，你可以采取以下步骤[^1]: 1. **确保初始状态设置**: 在模板中，确保你在`v-model`属性关联的数据对象上设置了默认值。例如，如果你的选项数组是`options`，那么应该这样设置： ```html <el-form-item label="关系："> <el-select v-model="form.value" placeholder="请选择"> <el-option v-for="(item, indexs) in options" :key="indexs" :label="item.label" :value="item.value" :default="{ value: item.value }"> <!-- 添加 default 属性 --> </el-option> </el-select> </el-form-item> ``` 2. **处理空值**: 如果你不确定数据是否会为空，可以在渲染选项之前添加一个判断条件来避免错误： ```javascript <el-option v-if="item.value !== undefined" ...> <!-- 只渲染有值的选项 --> ``` 3. **监听数据变化**: 使用`watch`或`computed`来监听数据的变化，确保在数据更新时自动更新选中的值： ```javascript // 示例使用 computed computed: { selectedOption () { return this.options.find(option => option.value === this.form.value); } }, ``` 或者 ```javascript // 示例使用 watch watch: { form: { handler (newVal, oldVal) { if (newVal && this.options) { this.$set(this.form, 'value', this.options.find(option => option.value === newVal)); } }, immediate: true, // 初始化时也立即执行 }, }, ``` 通过这些方法，可以有效地减少`el-select`组件在回显数据时的闪烁问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值