关于ant design vue 的那些事
关于学习ant design vue 的过程中的踩坑及解决方案记录
等鲸落
在编程的海里游
展开
-
【ant design vue】纯前端导出图片功能
在ant design vue 项目中遇到了一个需求:纯前端导出图片。经过查询文档案例,结合自身项目需求后,成果如下:因为多个页面使用到,所以我把导出方法封装了起来,代码如下:首先,引入这两个组件下载:npm i jszip -S or npm jszipnpm install file-saver --save因为项目中有分导出一个文件夹包含全部图片(导出选中数据包含的图片的首图),另外一种是导出一个文件夹里面多个文件夹,每个文件夹包含多张图片(导出选中数据包含的全部图片),.原创 2022-05-25 18:25:31 · 1038 阅读 · 0 评论 -
[ant design vue] 上传并识别二维码
ant design vue 上传并识别二维码功能原创 2022-05-16 10:34:46 · 569 阅读 · 0 评论 -
【ant design vue】图片上传(二)
续上一次的图片上传,可查看版本效果如下:html代码:accept是限制图片上传类型,customRequest是自定义上传方式,需要判断上传的文件是否有图片,还需要把上传的图片转成formData,再使用formData.append('参数名', 参数值)按需加入需要传入的值,否则会上传失败,如图list-type是上传列表的内建样式,file-list是绑定的图片文件数组,remove是删除图片回调,过滤出删除的图片文件,还需要把imgUrl1清空,在...原创 2022-02-25 18:54:16 · 2738 阅读 · 0 评论 -
[ant design vue] 关于ant design vue 表单报错合集
情况一:当我点击新增时会报以下错误:原因是我在使用v-decorator的同时使用了v-model,如下图:解决方案就是:把v-model删掉,需要动态获取值,可以通过: this.form.getFieldValue('fa_No')情况二:当我点击编辑时会报以下错误:原因是我在点击编辑给表单赋值时,值不是一对一赋值,而是一次性赋值导致一些在表单中没有写的参数,但是record中有,赋值只能少不能多所以导致报错了,如下图:解决方案就是使用this.form.setF..原创 2022-02-16 14:34:21 · 2466 阅读 · 0 评论 -
【ant design vue] 对form中的数据转型
以下是需要转型的字段,在form中没有找到阔以在里面进行转型的,所以写了一大堆转型,代码特别的冗余,如下图:转型成功以后 ,对应的打印,如下图:后来使用将所有的字段名添加进一个数组,然后for循环遍历,进行转型,如下图:转型成功后的打印如下:整整简化了好多垃圾代码,因为查文档并没有找到转型的解决方法,所以这里做一个记录...原创 2021-12-30 09:10:52 · 492 阅读 · 0 评论 -
【ant design vue】图片上传(一)
官网是这样的:action官网说不管是否使用都不能空着,但是实际上,在我的项目中是没有使用到的,我们是动态上传到后端,然后后端返回一个图片地址给我们显示在前台,代码如下:accept是限制图片上传类型,customRequest是自定义上传方式,我这边就是使用这个属性替换掉了原始的上传方式,直接调用后端接口,详细如下:拿到后端返回图片地址赋值给动态绑定img的src属性的imageUrl即可...原创 2021-12-18 17:46:43 · 3384 阅读 · 0 评论 -
【ant design vue】form表单取值方式
官方中有以下两种取值方式:因为不是很熟悉,所以还是查了文档找了一下使用方式,刚开始查到的文档是这样写的然后返回了undefined,后来又查询了一些文档,发现我多加了一个props属性,然后使用第二个方法成功了,代码如下:...原创 2021-12-14 10:45:22 · 1701 阅读 · 0 评论 -
[ant design vue] 表单验证成功,提示信息不显示
以上是原图以及源代码,input中带有表单验证,但是输入0以后却不显示报错信息,后来通过大哥指点,给每一个input加一个a-form-item问题解决。代码及效果如下:原创 2021-12-09 16:31:02 · 3351 阅读 · 0 评论 -
ant design vue 中select 的自定义下拉框内容属性dropdownRender的使用(一)
ant design vue 下拉表格记录(一)原创 2021-12-06 22:00:00 · 7806 阅读 · 0 评论 -
ant design vue form赋值的两种方式
ant design vue form 赋值的那些坑原创 2021-12-06 16:36:20 · 4420 阅读 · 0 评论