组件的使用
文章平均质量分 67
飞鱼爱吃米
记性不好,所以频繁记录
展开
-
ant-design-vue组件的upload上传头像上传三次的问题(图片多次上传问题)
使用upload组件时,发现上传方法会被调用3次,这样的话如何匹配对应上传动作为对应的图片数量是需要我们进行处理的。在使用组件的时候给action的属性值为上传地址,然后再change方法里面判断文件的上传状态为done再进行照片的转base64和上传动作。至于说指定done状态再处理上传后的图片是不可行的,原理不是很清楚,但是有了action,就能精准匹配done状态来处理图片数据。原创 2023-09-08 10:00:00 · 1334 阅读 · 3 评论 -
ant-table组件表格数据做合计行,并固定在表格底部
table组件表格数据做合计行,数据的处理方式可按照columns里面dataIndex定义的属性来配置,设置好后push进接口返回的表格数据中即可。某些时候,我们表格展示数值型数据的时候,可能会想做一个合计处理,这样能直观的了解到当前列的总计数据信息。根据表格的特性,合计行作为当前表格的多余一行,需要处理当前页的数据、条数(条数不处理,翻页后有重复数据),官方是没有提供这个功能的,这就需要我们自己处理了。合计行一般显示的话,处理固定在最底部比较好。原创 2023-09-07 09:55:17 · 1251 阅读 · 0 评论 -
ant-design-vue的Select选择器的输入筛选效果
很多时候,我们下拉选择器的选择项是由后台数据提供的。简单的下拉选择只适用于数据量较小的情况;大量数据的处理需要配合筛选功能,我们在输入的时候,就自动过滤出符合的数我们在输入的时候,就自动过滤出符合的数据,这样数据量大大减少,我们在选择的时候就会更加方便。搜索时过滤对应的option属性,如设置为children表示对内嵌内容进行搜索。在函数内部,我们对内嵌内容进行筛选返回。官方的文档官方的话,若有问题就找它。......原创 2022-07-25 11:16:12 · 4349 阅读 · 0 评论 -
vue-design-vue的Select选择器清除内容后为空白,placeholder不显示
我们用placeholder来进行用户提示,但是在我们进行数据提交之后会发现我们选择的内容仍然存在于选择框内,这其实是不符合我们的业务逻辑的,所以就需要进行提交后的清除。//直接把type的值设置为空字符串是没用的,只有赋值为undefined才能实现清除效果。可以想象我用v-model进行双向数据绑定,在提交之后把数据重新赋值为空,这样不就可以清除了嘛。在清空的时候也会遇到这样的处理问题,依旧是把值设置为undefined就能解决啦!我们在使用的时候只需要加上配置项v-model,主要来控制清除的。...原创 2022-07-20 16:07:16 · 2737 阅读 · 0 评论 -
ant design vue的table取消自带分页
就像我记录的这些问题,一方面是给遇到同样问题的小伙伴提供一个解决方案,另一方面也是给自己一个警醒,避免下次再出现同样的问题。报错错误位置—>报错内容—>官方组件使用问题/自定义组件注册问题/配置项/数据类型。组件默认开启了分页,你不但可以通过pagination配置显示或隐藏,还可以配置显示位置。使用组件的时候遇到问题,我们首先要去看文档内相关配置项的介绍。再根据配置项的默认值和数据类型,就能处理大部分遇到的问题。这里是飞鱼爱吃米,只授渔,不授鱼!在使用table组件的时候,配置。...原创 2022-07-04 10:23:12 · 9348 阅读 · 0 评论 -
vant的Uploader 文件上传,图片数据回显
描述一下:点击上传证件照,选取需要的图片文件,然后图片在证件照栏展示看着挺简单的,用的是vant,里面有个文件上传的组件Uploader,有自定义上传样式的,像这样选取文件后没反应了!!!其实也不是,没有反应就是没有对文件数据进行处理展示。看一下Uploader的API:参数file可以获取到一个文件对象可以拿到文件名、文件类型、还有图片的base64格式的图片数据,那么我们只需要定义一个字段来接受这个图片数据,并绑定给...原创 2022-03-07 13:56:26 · 14497 阅读 · 14 评论 -
element-ui组合输入框的数据是如何处理的
实现的功能就是,当我们选择输入完成后,点击查询时,把数据传到后台。是不是感觉需求也不是很复杂呀,错!大错特错!因为select本身带有自己的事件显然,这些个步骤都需要放在表单里,把表单作为一个响应式的数据,实时变化。在事件里面我开始做的处理就是选择一被触发,先把选择到的value作为表单数据的一个键,然后把后面输入框的数据作为value的值。问题出现:每当触发赋值后,却发现传过去的竟然是undefined!因为选择器是在输入框的数据变化前把数据赋给对应的字段,那时输入...原创 2022-01-07 15:34:00 · 1256 阅读 · 0 评论 -
Ant Design of Vue的树形控件Tree的使用
树形控件节点的添加、右键菜单、异步加载原创 2022-06-10 18:00:25 · 7782 阅读 · 5 评论 -
ant design vue的Upload头像上传
看一下官网的介绍吧:头像上传好巧不巧,第二个案例介绍的就和我的需求一样!等我在这里测试一下,结果发现:图片一直处于上传状态,怎么也展示不到页面上。这是怎么回事呢?得,问题就是它了,看一下api介绍:非得加上这个属性吗?我就不能数据收集完再一起提交吗?当然可以!!需要这三个api:html部分js部分主要做处理的是在change事件里面,调用了转base64的方法,方法里面可以把图像的url赋值、显示。数据收集完,我们拿到的imageUrl就是转码base64格式的图片数据,传到原创 2022-06-13 13:58:48 · 2285 阅读 · 1 评论 -
对话形式的留言列表展示
基于vue实现了一个类似微信聊天框的留言展示框,左侧展示留言人和被留言对象,另外在左侧上方设置了搜索框,可以快速查找想要浏览的对象留言;右侧上半部区域用作留言展示,增设滚动条,配合加载中的显示调取获取留言列表接口的方法,实现了效果上的列表懒加载。另外右侧下半部区域一是起到占位的作用,便于上半部实现列表的懒加载;其次就是多加一个提示,一旦列表的数据加载完成就提示‘暂无更多留言’,如果提示‘上滑加载更多’就表示列表还有数据,可以进行列表懒加载。整个界面的样式效果是由css样式实现的............原创 2022-06-17 12:41:26 · 493 阅读 · 0 评论 -
vue.draggable拖拽生成课程表
根据数据源提供的科目及教师信息,拖拽至空白课表内,生成一份课表。首先科目有多个,教师也有多个。数据源部分做一个切换选择科目的效果,选取科目后,提供科目及授课人名字。课表可以是一张空白课表,也可以默认指定某日某节某人某课。课表使用表格呈现,这样区域方便划分。表头是工作日,表体部分的第一列是节次。为了更方便查看,最左边设计上中下午段的划分。拖拽效果有比较成熟的组件库了:Vue-Draggable。它是基于Sortable.js实现的,适用vue项目,可以在pc端使用也可以在移动端使用......原创 2022-06-29 15:12:27 · 2914 阅读 · 4 评论