- 博客(47)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 从入门到精通：用VxeTable重构你的Ant Design表格
还在为Ant Design Table的性能问题头疼？试试VxeTable吧！这篇博客将带你从零开始，轻松完成从Ant Design Table到VxeTable的升级。你将学到：如何快速安装配置、替换核心组件、自定义列内容、实现分页功能，以及动态列配置和性能优化技巧。无论是处理大数据量，还是满足用户个性化需求，VxeTable都能轻松应对。只需几行代码，就能让你的表格体验焕然一新！快来解锁VxeTable的强大功能，让你的开发效率翻倍！
2025-02-28 10:00:00
563
原创 WebSocket：让前后端“谈恋爱”的神奇工具
WebSocket是什么？它就像一条“爱情专线”，让前端和后端告别传统的“写信”模式，实现实时沟通！无论你是小白还是开发者，这篇博客用最通俗的语言和生动比喻，带你轻松理解WebSocket的工作原理：从建立连接、接收消息到发送消息，一步步教你如何让前后端“谈恋爱”。无需复杂代码，只需几分钟，你就能掌握这个让网页“活”起来的神奇工具！点击阅读，解锁实时交互的秘密！🚀
2025-02-27 13:00:00
458
原创 Vue + Ant Design 表格的“魔法”操作：动态列与行合并的终极指南
你是否遇到过需要动态生成表格列，并且还要合并某些行的需求？听起来像在玩“俄罗斯方块”，只不过这次我们堆的是数据！本文将带你深入 Vue 和 Ant Design 的“魔法”世界，手把手教你如何实现动态列生成与行合并。从后端数据处理到前端动态渲染，从性能优化到代码封装，我们将一步步拆解这个复杂需求。无论你是前端新手还是老手，这篇博客都能让你轻松掌握表格的“黑科技”。准备好迎接挑战了吗？点击进来，解锁 Vue 表格的终极操作！
2025-02-27 10:00:00
747
原创 数字滚动效果：让你的数据“动”起来！
数字翻牌器，本文将手把手教你实现一个炫酷的6位数字滚动效果！通过HTML、CSS和JavaScript的巧妙结合，你可以让数字像老虎机一样滚动起来，不足6位时自动补零，超过6位时显示`99999`。文章详细讲解了数据处理、动画设置和多数据展示的实现方法，并附上完整的代码示例和样式设置。无论你是前端新手还是老手，都能轻松掌握这个技巧，让你的网页瞬间提升档次！点击阅读全文，解锁更多炫酷效果！😄
2025-02-26 13:58:29
868
原创 Vue 表格的“七十二变”：如何让静态表格秒变可编辑
想让静态表格秒变“可编辑神器”？用户点击编辑时切换输入框，保存时提交数据，取消时一键还原——这种“魔法操作”如何实现？本文用 Vue + Ant Design 手把手教你玩转表格编辑！从**编辑状态切换**到**数据快照恢复**，从**防手抖的编辑锁**到**丝滑的 Loading 反馈**，揭秘可编辑表格的“黑科技”。无论你是被产品经理逼疯的前端，还是想提升技能的新手，这篇博客都能让你轻松掌握“让用户指指点点”的核心代码！点击进来，解锁表格的终极变形技能，从此告别重复造轮子！
2025-02-26 12:56:04
547
原创 ant-design-vue组件的upload上传头像上传三次的问题（图片多次上传问题）
使用upload组件时，发现上传方法会被调用3次，这样的话如何匹配对应上传动作为对应的图片数量是需要我们进行处理的。在使用组件的时候给action的属性值为上传地址，然后再change方法里面判断文件的上传状态为done再进行照片的转base64和上传动作。至于说指定done状态再处理上传后的图片是不可行的，原理不是很清楚，但是有了action，就能精准匹配done状态来处理图片数据。
2023-09-08 10:00:00
1728
3
原创 ant-table组件表格数据做合计行，并固定在表格底部
table组件表格数据做合计行，数据的处理方式可按照columns里面dataIndex定义的属性来配置，设置好后push进接口返回的表格数据中即可。某些时候，我们表格展示数值型数据的时候，可能会想做一个合计处理，这样能直观的了解到当前列的总计数据信息。根据表格的特性，合计行作为当前表格的多余一行，需要处理当前页的数据、条数（条数不处理，翻页后有重复数据），官方是没有提供这个功能的，这就需要我们自己处理了。合计行一般显示的话，处理固定在最底部比较好。
2023-09-07 09:55:17
1604
原创 腾讯地图坐标至地址的转换（逆地址解析，经纬度转换成具体的地点）
在地图上，标注点后，我们可能期望得到的不仅仅是具体的经纬度，该点的具体名称也是用户所期望看到的。所以需要把点标记得到的经纬度转换成地址。Cannot read properties of undefined (reading 'Geocoder')。个人key控制台开启服务：WebserviceAPI的域名白名单。
2022-10-25 18:00:00
5358
2
原创 腾讯地图实现站点标记，及已标记的点回显在地图上
腾讯地图实现点标记及回显操作。使用过程中可能会遇到："ReferenceError: TMap is not defined"，"ReferenceError: TMap is not defined"，地图不会重绘，容器内出现多个地图实例等问题，相关的解决方案文中都有对应的解释。
2022-10-10 11:10:52
2860
1
原创 原生js实现带左右箭头可滑动的tab效果
方便控制左右按钮的禁用状态设置，我采用button组件的图标按钮。可视区域为黄色框①，包含可视tab蓝色框②以及左右箭头红色框；绿色框③就是所有的tab了，②和③的关系就是卡槽和卡带的关系。控制菜单tab左右箭头的显隐。
2022-10-09 10:10:27
2722
原创 pc端微信二维码支付流程及问题排查
弹窗内监测支付状态来关闭弹窗，支付状态依赖事件轮询机制进行监测。当前队列为空的时候，会到事件队列里面去取，如果当前队列执行时间长了点，事件队列里面就会被添加很多事件，当前队列执行完成后，事件队列的事件就会短时间内连续触发，相较于我们使用setInterval进行轮询的初衷就会背道而驰。明明函数的嵌套关系很多了，明明使用了settimeout函数，明明函数内还使用this，我还是没有考虑this的指向问题，倒是用它用的起劲，出现问题抓耳挠腮就是找不到源头。二维码支付
2022-08-19 17:50:18
3137
原创 js计算两个日期相差的时间，进行日期间的比较
我们在展示订单、工单、项目单这些有日期的数据的时候，很多时候需要根据截止时间来对临期单子进行特殊标注，改变状态。这个时候就会面临两个日期之间的比较。一般来说，日期是不能直接进行运算来计算出间隔的时间。所以需要一个处理日期的方法，使他们能进行加减运算、比较等。日期进行比较的前提是处理成为对应的毫秒数，然后再进行比较。这里需要用到Date的getTime()方法。...
2022-08-06 15:28:09
1195
原创 数据大屏显示天气情况，获取实时的天气信息(js进行异步请求获取响应的内容)
话不多说，直接看效果：一个基本的数据大屏，一般都是要展示时间信息，这不必多说，大家都会。但是实时的天气数据我们怎么显示呢？权威的就是中央气象台的数据，那我们该怎样拿到这个数据嘞？项目内使用链接获取信息js进行异步请求获取响应的内容——>>>首先创建 XMLHttpRequest 对象：**XMLHttpRequest 用于在后台与服务器交换数据。**...
2022-08-03 11:25:22
2541
1
原创 浏览器踩坑：浏览器访问已发布服务器的网址显示跨域，但微信浏览器可以正常访问，别人的浏览器也可以正常访问
前几天，公司新来个后台小哥，要接手我们包部署服务器的发布工作，作为练手，老大让他在我们测试服务器上部署。之前呢，我的前端包都是另一个小哥部署的，是在正式服务器上。无论是更新速度还是访问结果，我俩之间打包的发布流程一直是相安无事的，直到……我打了压缩包给新来的小哥，他倒也顺利的放上去了。完事他让我看看内容是不是最新版的。大大的Access to XMLHttpRequest at XXX by CORS 提示我：快看看吧，你跨域啦！本地打包部署到服务器上后，访问链接登不进去系统，控制台提示跨域问题。...
2022-08-02 17:01:13
2231
原创 Echarts动态生成图表，图表类型进行切换，长数据区域展示
也就是x轴，y轴的数据啦，你可以直接定义好，也可以使用接口数据（这样就是属于动态的了）。具体的内容在配置项里讲—>>>就是你在这个容器内，设置了其他的开关控制数据的变化。这时候呢，之前渲染好的图表就要替换成依靠新数据生成的新图表。千万千万不要选择直接替换！！！你会发现，新图表和老图表直接哥俩好，重叠在一起了。。。不能在单个容器上初始化多个 ECharts 实例功能看着老全了，就是有bug。动态类型切换的时候，活性不是很自由的切换。多句嘴，之前Echarts的工具栏的提示是中文的，现在的版本一般都提示英文。
2022-07-30 17:35:20
4770
1
原创 vue的基本使用（内附vue常见的面试题）
是一段独立的，能够代表页面某个部分的代码片段，拥有自己的数据，以及完整的生命周期。分为全局组件和私有组件全局组件在每一个vue实例中都可以使用，私有组件需要用到组件传值仅在web页面初始化时，加载相应的html、JavaScript、css，一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或渲染，取而代之的是利用路由机制实现html内容的切换，ui和用户的交互，避免页面的重新加载computed。..............................
2022-07-30 11:26:14
586
2
原创 数组数据处理成表格可渲染的数据（按指定步长取对象的某一属性组成新的数组对象）
那就是在获取到后台返回的数据后，直接根据数组长度和表格列数得到表格行数，动态生成对象，接着处理数据。如果是按固定长度取连续的数据，也就是数据切片，那倒是容易处理，slice方法一下就能处理好。①在这里我们确切的知道应有的数组长度为4，所以可以直接定义4个空对象来存放需要组合的数据。根据返回的数组的长度和表格的列数，就能知道我们需要多少行数据，也就是需要定义几个对象。这其实是很普遍的现象，毕竟数据都是后端返回的，如果不打印出来，数据的长度我们并不可知。4行3列的表格要渲染出来，表格数据应该是。......
2022-07-29 16:00:07
864
原创 css修改滚动条的样式
再加上贴边的宽度，对于内容本身就比较窄的区域来说，这种样式笨重感十足！less模式下，如何更改定义好的颜色变量的透明度呢？大灰块做背景，内嵌小灰块做滚动距离的展示。而像这种样式的滚动条就比较可以了。有滚动条的容器滚动条属性{}fade(颜色变量，透明百分比)就可以在里面设置对应的样式了。这样就可以啦，快去试试吧。上面是滚动条相关的属性。......
2022-07-25 14:11:44
25122
原创 ant-design-vue的Select选择器的输入筛选效果
很多时候，我们下拉选择器的选择项是由后台数据提供的。简单的下拉选择只适用于数据量较小的情况；大量数据的处理需要配合筛选功能，我们在输入的时候，就自动过滤出符合的数我们在输入的时候，就自动过滤出符合的数据，这样数据量大大减少，我们在选择的时候就会更加方便。搜索时过滤对应的option属性，如设置为children表示对内嵌内容进行搜索。在函数内部，我们对内嵌内容进行筛选返回。官方的文档官方的话，若有问题就找它。......
2022-07-25 11:16:12
4865
原创 Echarts清空图表：There is a chart instance already initialized on the dom.
能销毁肯定需要先存在，所以定义一个全局变量来存储创建后的ECharts实例，在改变数据需要重新绘制图表的时候加上条件判断图例是否存在来决定是否销毁。也就是说，指定的区域作为canvas容器，根据触发条件改动数据之后，依旧沿用之前的的图表配置，把图表重新生成。（有时间我试一下，再来更新）原因就是销毁二字，我想当然，图表我还需要用，你销毁再用的时候怎么获取呢？不过我在想，上面clear()方法没用，或许是实例没保存，触发时机不对。不过，可能是使用方法的位置不正确，导致方法没有合适的被使用也说不一定。......
2022-07-25 10:04:18
9023
16
原创 vue-design-vue的Select选择器清除内容后为空白，placeholder不显示
我们用placeholder来进行用户提示，但是在我们进行数据提交之后会发现我们选择的内容仍然存在于选择框内，这其实是不符合我们的业务逻辑的，所以就需要进行提交后的清除。//直接把type的值设置为空字符串是没用的，只有赋值为undefined才能实现清除效果。可以想象我用v-model进行双向数据绑定，在提交之后把数据重新赋值为空，这样不就可以清除了嘛。在清空的时候也会遇到这样的处理问题，依旧是把值设置为undefined就能解决啦！我们在使用的时候只需要加上配置项v-model，主要来控制清除的。...
2022-07-20 16:07:16
2929
原创 Warning: [antdv: DatePicker] `defaultValue` provides invalidate moment time.
使用ant-design-vue的dataPicker出现问题：我需要在页面上点击某天的日期，出来一个弹窗让我添加当前日期的备注。弹窗内的日期在点击的时候就已经给了，并且是禁用状态。然后就爆红了。。。同样这次的爆红也是不影响页面效果的，但是给人的观感不好。所以还是要找出解决方案的💪💪Warning: [antdv: DatePicker] provides invalidate moment time. If you want to set empty value, use instead...
2022-07-14 17:48:30
1488
原创 ant design vue的table取消自带分页
就像我记录的这些问题，一方面是给遇到同样问题的小伙伴提供一个解决方案，另一方面也是给自己一个警醒，避免下次再出现同样的问题。报错错误位置—>报错内容—>官方组件使用问题/自定义组件注册问题/配置项/数据类型。组件默认开启了分页，你不但可以通过pagination配置显示或隐藏，还可以配置显示位置。使用组件的时候遇到问题，我们首先要去看文档内相关配置项的介绍。再根据配置项的默认值和数据类型，就能处理大部分遇到的问题。这里是飞鱼爱吃米，只授渔，不授鱼！在使用table组件的时候，配置。...
2022-07-04 10:23:12
10525
原创 Echarts报错： Error in v-on handler: “Error: Initialize failed: invalid dom.“
在使用Echarts遇到了这个问题。遍寻无果的情况下，我是怎么解决的？最开始使用，图表组件是正常的。可是怎么就出现这个问题了呢？同一个路由，我想展示不同图表组件构成的页面，所以采用了tab切换按钮控制单个页面的显示与隐藏。注意！！！从我这个思路开始，就是我踩坑的第一步。控制显隐想当然就采取了v-if。。。万万忘了v-if可不是简单的控制元素显示和隐藏，它可是创建和销毁元素来达到所谓的显隐效果。当然，上面都是我马后炮式的后知后觉，和报错交锋的时候依旧沉浸在代码逻辑层面。之前有说过：像这种[Vue
2022-07-01 17:31:00
3532
7
原创 vue.draggable拖拽生成课程表
根据数据源提供的科目及教师信息，拖拽至空白课表内，生成一份课表。首先科目有多个，教师也有多个。数据源部分做一个切换选择科目的效果，选取科目后，提供科目及授课人名字。课表可以是一张空白课表，也可以默认指定某日某节某人某课。课表使用表格呈现，这样区域方便划分。表头是工作日，表体部分的第一列是节次。为了更方便查看，最左边设计上中下午段的划分。拖拽效果有比较成熟的组件库了：Vue-Draggable。它是基于Sortable.js实现的，适用vue项目，可以在pc端使用也可以在移动端使用......
2022-06-29 15:12:27
3234
4
原创 对话形式的留言列表展示
基于vue实现了一个类似微信聊天框的留言展示框，左侧展示留言人和被留言对象，另外在左侧上方设置了搜索框，可以快速查找想要浏览的对象留言；右侧上半部区域用作留言展示，增设滚动条，配合加载中的显示调取获取留言列表接口的方法，实现了效果上的列表懒加载。另外右侧下半部区域一是起到占位的作用，便于上半部实现列表的懒加载；其次就是多加一个提示，一旦列表的数据加载完成就提示‘暂无更多留言’，如果提示‘上滑加载更多’就表示列表还有数据，可以进行列表懒加载。整个界面的样式效果是由css样式实现的............
2022-06-17 12:41:26
615
原创 ant design vue的Upload头像上传
看一下官网的介绍吧：头像上传好巧不巧，第二个案例介绍的就和我的需求一样！等我在这里测试一下，结果发现：图片一直处于上传状态，怎么也展示不到页面上。这是怎么回事呢？得，问题就是它了，看一下api介绍：非得加上这个属性吗？我就不能数据收集完再一起提交吗？当然可以！！需要这三个api：html部分js部分主要做处理的是在change事件里面，调用了转base64的方法，方法里面可以把图像的url赋值、显示。数据收集完，我们拿到的imageUrl就是转码base64格式的图片数据，传到
2022-06-13 13:58:48
2627
1
原创 发布版本代码打标记git tag
对于刚入门的小白来说，如果你老大说：“欸那谁，你把我们刚发布的那版打个标记”。标记？啥标记？在哪打？怎么打？标记就是做个标签，方便我们后续发现已发布的版本出现问题时回溯版本。git里面的tag就是用来干这个事情的。我们需要给我们提交的代码做标记最最简单易理解的做法就是（提交代码->给最新一次提交的代码做标记）：生成一个固定版本的标记：把刚刚生成的标记打在最新提交的代码上：查看某个版本的详细信息：如果版本号过多，怎样防止重复呢？列出已经存在的tag：过滤出符合条件的tag：给某个提交历
2022-06-13 12:38:12
1544
原创 Cannot read properties of undefined (reading ‘tapPromise‘)
tapPromise报错，vue3打包报错，compression-webpack-plugin版本问题
2022-06-13 10:59:24
8301
原创 vant的Uploader 文件上传，图片数据回显
描述一下：点击上传证件照，选取需要的图片文件，然后图片在证件照栏展示看着挺简单的，用的是vant，里面有个文件上传的组件Uploader，有自定义上传样式的，像这样选取文件后没反应了！！！其实也不是，没有反应就是没有对文件数据进行处理展示。看一下Uploader的API：参数file可以获取到一个文件对象可以拿到文件名、文件类型、还有图片的base64格式的图片数据，那么我们只需要定义一个字段来接受这个图片数据，并绑定给...
2022-03-07 13:56:26
15350
15
原创 Invalid prop: custom validator check failed for prop “value“
问题描述看见这种大片的爆红，就两个字：头疼！！！虽然这样的爆红不影响程序运行，但是作为一个合格的程序猿，我们怎么可以允许这个问题出现呢????问题排查顺着提示的报错位置找到日期选择框：以及相关的方法：看着是没什么问题的，按照度娘得到的解决方案进行排查：①属性中间是否有空格②标签的左边和右边是否在一行主要就是代码规范性的问题，显然，排查过后的答案是无。问题解决既然根据既有的方案排查不到问题所在，那我们就回归到问题本身：自定义的验证程序对 value 检查失败，思考：这个组件里面也
2022-02-11 11:06:04
21237
2
原创 element-ui组合输入框的数据是如何处理的
实现的功能就是，当我们选择输入完成后，点击查询时，把数据传到后台。是不是感觉需求也不是很复杂呀，错！大错特错！因为select本身带有自己的事件显然，这些个步骤都需要放在表单里，把表单作为一个响应式的数据，实时变化。在事件里面我开始做的处理就是选择一被触发，先把选择到的value作为表单数据的一个键，然后把后面输入框的数据作为value的值。问题出现：每当触发赋值后，却发现传过去的竟然是undefined！因为选择器是在输入框的数据变化前把数据赋给对应的字段，那时输入...
2022-01-07 15:34:00
1339
原创 时间日期格式化
2、使用插件npmjs.com里面的date-format先下载使用的话有两种格式：①②这是它里面的一些内置格式当然，你也可以自定义格式按照你需要的格式自己组合即可先下载举个栗子如果你有其他的需求，请移步官网 ：momentjs获取当前的日期时间信息：new Date()—>Wed Jun 15 2022 14:31:18 GMT+0800 (中国标准时间)获取当前日期：获取当前时间：获取日期与时间：...
2022-01-06 11:38:44
1021
原创 vue-router的基本使用
Vue Router路由主要方便单页面应用的内容切换1、使用下载：npm install vue-router引入：import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)实例化一个路由对象let router =new VueRouter({ routes:[{ path:"/login", //路由链接 component:()=>import("../views/login/l
2021-12-16 15:25:20
140
原创 Vuex的基本使用
Vuex1、定义Vuex是一个专为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预期的方式发生变化2、核心Vuex的核心就是store仓库store基本上就是一个容器，它包含着你的应用中大部分的状态3、特点①Vuex的状态存储是响应式的②改变store中的状态的唯一途径是显式的提交mutation4、属性state它是vuex的基本数据，用来存储变量getter从基本数据派生出来的数据，相当于state的计算属性，有
2021-12-15 17:00:53
733
原创 添加购物车的基本流程
多商铺–添加购物车1、基本流程判断购物车是否为空>如果不为空>判断商铺是否存在>如果商铺存在>判断要添加的商品是否在该商铺中>如果商品存在>直接修改商品数量即可如果商品不存在>把商品添加至对应的商铺中如果为空>直接加入商铺和商品2、代码实现方法一有点复杂，但是容易理解 if (state.cartListDatas.length > 0) { // 进来就说明本地存储里
2021-12-15 15:46:45
1100
原创 token的基本使用
Token1、定义token：服务端生成的一串字符串，可以解决频繁登录的问题它作为客户端进行请求的一个令牌：第一次登录后，服务器生成一个token返回给客户端；客户端只需要带上token来请求数据即可，无需再次带上用户名和密码2、目的为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮3、使用(后端)生成token的插件：jsonwebtoken下载：cnpm install jsonwebtoken --save引入：var jwt = require('jsonwebto
2021-12-15 15:24:14
14825
原创 axios的基本用法
axios1、定义axios是易用、简洁且高效的http库它是一个基于Promise的http库，可以用在浏览器和node.js中2、安装使用npm$ npm install axios3、请求方式①get–>获取或查看//不带参数的axios.get("http://localhost:3000/data").then(res => { console.log(res.data);})//参数直接拼在url上的axios.get("http://localhos
2021-12-08 12:49:17
987
原创 利用CSS写简单爱心
学习CSS三天了，可以利用目前所学的制作一个简单的爱心仅仅需要三个盒子一个正方形，两个圆如下图：或许还不是能很清楚的看出来，我把多余的部分消除了，如下：好了，有了结构，就可以来写代码了...
2021-07-14 21:05:12
2324
求一个好用的单向连接的站点路线组件
2022-09-20
对数组对象的控制逻辑显示全部模块的内容
2022-09-01
TA创建的收藏夹 TA关注的收藏夹
TA关注的人