关于Element UI 日期选择器清除按钮的坑

最新推荐文章于 2024-07-15 14:46:38 发布
最新推荐文章于 2024-07-15 14:46:38 发布
阅读量1.4k 收藏 1
点赞数
文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l836300583/article/details/125276889
版权
在Vue项目中遇到日期选择器清除后返回null值，但后端需要字符串类型的情况。尝试使用change事件监听并转换，但数据刷新后方法失效。讨论了两种解决方案，包括直接在赋值时进行条件判断。寻求通用解决方案。
摘要由CSDN通过智能技术生成

element 的日期选择器清除按钮清除之后拿到的是null值，但是后端需要的是字符串类型，我之前看了很多博客，一些说用日期选择器的change事件，一些说底下 用if判断赋值为字符串空，我尝试用change写一个通用的事件来解决省一些麻烦，第一个属性是对象的对应的字段，第二个是v-model绑定的值，底下判断当值改变时判断值是否为null,为null就直接个这个对象赋字符串空我写的

这个方法刚开始第一下是管用的，但是在本页面点击提交进行数据刷新再次赋值这个方法就不管用了，我一时没有别的解决方法就直接选择下面那种赋值

当然如果各位有别的解决方法可以在底下评论

A-?-_?
关注
Element-ui踩坑记录 DatePicker 日期选择器
weixin_43827743的博客
09-22 4092
记录自己在使用Element-ui的过程中踩过的坑 报错信息:[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘0’ of null” 在使用DatePicker日期选择器选择日期范围的时候，会用到一个属性clearable。这个属性是Boolean变量，用于决定是否显示清除按钮，默认为true。 <el-date-picker v-model="value" type="daterange"..
element UI 日期选择器 el-date-picker关于清空的坑（终极解决方案）
Alfie_1115的博客
11-30 1万+
项目场景： el-date-picker放在表单里面和 el-form-item el-checkbox-group el-checkbox 一起用的时候 问题描述： 查阅文档得知el-date-picker的clearable默认为true， 但是清除之后调查询接口，报错。报错内容为 Error in v-on handler: “TypeError: Cannot read property ‘0’ of null” 下面为原本代码： <el-form :inline="
element-ui库的日期时间选择器清空踩坑
阿松的博客
05-16 4240
element-ui库的日期时间选择器清空后发送请求遇到的报错问题
elementui中日期选择组件 el-date-picker 点击 × 清空所选时间，会将model绑定的值设置为null
最新发布
qq_38210427的博客
07-15 437
是组件的行为没法控制。
vue element-ui el-date-picker日期选择器 清空按钮
LJJONESEED的博客
11-18 4414
watch监听选择器 点击清空按钮时会报错 出现这种情况的原因是: 当点击清除按钮的时候，value会被设置为null。 <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pick
vue element-ui el-date-picker日期选择器 清空按钮之坑
热门推荐
li222248的博客
04-03 1万+
watch监听选择器 点击清空按钮时会报错 这是因为Element-ui中没有内置清除按钮的回调函数, 当点击清除按钮的时候，value会被设置为null。 因此要解决这个bug,我使用的方法是在下次调用之前，为value重新赋值 if (!newData) { newData = [] } 因为Element-ui中没有内置清除按钮的回调函数，所以clear事件不生效 我就在为value重新赋值时添加我要做的事： watch: { time_v
Element UI el-date-picker datetime 日期时间选择器 底部添加清除按钮
ni_zhongai的博客
01-22 1815
1.使用组件提供的快捷方法 Shortcuts 完成，需要把样式调整到对应的位置。由于我最终没有选择这个方法，具体样式需要大家自己去完成。客户需要在时间选择器点击后在选择面板的下方添加一个清除按钮进行时间的清除，不想使用自带的清除小x按钮。链接：https://juejin.cn/post/7317325063128088585。商业转载请联系作者获得授权，非商业转载请注明出处。element-ui并没有暴露可以自定义按钮与事件。接下来就是指令的完成，vue2（3也是同理）也可以到我的掘金上查看。
element-plus 组件 低版本 el-date-picker type=“monthrange“ 选完时间清空之后选择面板的选中状态未清除问题
a1471936255的博客
05-06 420
el-date-picker type="monthrange" 选完时间清空之后选择面板的选中状态未清除问题
关于el-date-picker组件,如何隐藏时间组件底部清空按钮
llh11111的博客
04-28 583
我们只需要在你需要的页面的组件添加 popper-class=“XXXX”，然后在element-ui.scss文件中添加。前几天我也遇到了这个问题，于是我上网找相关的文章，大多数都是说在全局添加。但是这样有一个问题出现，就是所有的时间组件的清空按钮都会不见。后面我在element官网看了有一个自定义的class。这样子就不会影响到全局了。
elementUI el-date-picker 点击清空时时间重置为当前时间
AllTimeLow丶的博客
12-25 1019
添加监听，值为null时，赋值为当前时间。
中英文日期选择器
06-06
- 提供直观的交互方式，如日历图标点击打开日期选择面板，或者输入框直接输入日期，配合清除按钮方便用户修改。 3. **日期选择功能**： - 支持年、月、日的选择，同时考虑月份和年份的快速跳转，以方便用户选择...
隐藏elemeent-ui中日期选择器的清空按钮,清空图标
gxh0816的博客
12-23 6701
问题: 今天上班时需要解决一个,日期选择器里面的清空图标及清空按钮的隐藏(不可用) 首先是图标如何隐藏呢? 所以只需要在日期时间选择器标签里面写上这个属性为false就好了 那么隐藏清空按钮怎么写呢? 想法来自于 https://blog.csdn.net/qq_41648113/article/details/109614918 但是我写了没用,让我就重新写了一个style标签,和我一样没有效果的可以参考. .el-picker-panel__footer .el-picker-panel__li
element-ui Cascader 级联选择器清除选中
Lingling_12356的博客
11-27 1139
<el-col :span="24"> <el-form-item label="教室地址" prop="regionCode"> <el-cascader style="width: 100%;" class="input-width" ref="cascaderClassroom" expand-
elementui中日期选择组件el-date-picker 点击 × 清空所选时间，会将model绑定的值设置为null
m0_57341617的博客
08-04 2222
el-date-picker绑定value，当点击x时会将value的值改为null，重新赋值时 会报错，解决方案： watch: { value1(val, oldVal) { if (!val) { this.value1 = new Date() } } }, 监听value的值并且判断新值，如果新值为null，就
element 日期选择器 x 清空事件
weixin_60723844的博客
03-24 6115
<el-date-picker v-model="chooseSe.time" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @c...
Element-ui关于日期选择器在清除内容后无法进行第二次查询的问题。
qq_51930729的博客
05-26 838
element日期组件清除后无法再次查询问题的解决方案！
Web前端之vue3+element-plus的el-date-picker日期选择器清空无回调的解决方案
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
12-01 2351
Web前端之vue3+element-plus的el-date-picker日期选择器清空无回调的解决方案
ElementUI DatePicker日期选择器清除后报错！
ctsyolo的博客
11-07 1289
使用el-date-picker组件，默认带了这个属性，这个属性是用于显示清除按钮，我们点击这个按钮，控制台会报如下错误：我们的代码如下: 问题产生的原因 当点击清除后，data被赋值为null 所以报错了 可以先进行判断 为null就不进行赋值了
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值