Elementplus中TimePicker时间选择器 数据类型的转换 TypeError: dates.map is not a function

Vue3 TypeError: dates.map is not a function

近期在用Vue3 + TS开发一个项目,其中出现一个bug排查了很久,并将其记录

报错信息

报错提示TypeError: dates.map is not a function
在这里插入图片描述

报错原因

在排查我发现是我更换变量类型导致的,在项目中有个需求是记录时间区间的,本项目用了elementPlus的组件库,在使用TimePicker时间选择器,其数据的类型为数组,如['08:00:00','20:00:00'],但在后端的传参限制上需要传递一个string类型的参数,如'08:00:00~20:00:00',故在发起请求前,将['08:00:00','20:00:00']转换为字符串'08:00:00~20:00:00',这就是报错的原因。

定义的接口参数类,对参数进行限制,在这对timeRange对其设定any类型。
在这里插入图片描述
在触发请求方法中,对表单数据中的timeRange进行格式的转换。
在这里插入图片描述
在对接口参数进行类型的any,但是依然报错,所以不是这个的问题

报错原因

这个报错原因出在Elementplus,因为TimePicker时间选择器接受的数值为数组类型,在发起请求前,将其进行改变,TimePicker时间选择器依然存在,这会将字符串类型的数据挂载到TimePicker时间选择器,就会引起这个报错。以此为解决起点,我将表单关闭的触发放在了类型转换的前面,但是依然报错,我恍然大悟,当表单组件进行初次渲染后,其dom一直是存在的,故表单关闭后其依旧会引起报错。

解决方法

方法1

1、将表单item的prop的值进行修改,修改成与请求参数无关的参数,作为只显示但不参与交互的表单数据
在这里插入图片描述
2、在点击编辑的行为中,将表单中真实的时间区间数据赋值给虚假的时间区间数据,用来表单显示
在这里插入图片描述
3、在请求行为中,在发起请求之前将虚假的时间区间通过类型转换赋值给真实的时间区间数据。
在这里插入图片描述

方法2

在对数据进行类型转换之前,将dialog关闭,注意需要通过v-if来控制,这样会删去dom。
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45791692/article/details/124454316
今日推荐