行咘行啊细狗-CSDN博客

原创 ref不能自动深度监听嵌套属性的变化的解决方法~

1、背景：假设你使用ref申明了一个对象，此时你在后续的逻辑中对这个对象进行赋值操作，但是此时你会发现数据变了，但是页面没变。的属性可能不会触发响应式更新，因为 Vue 3 的响应式系统是基于 Proxy 的，它只能检测到整个。的替换，而不能自动深度监听嵌套属性的变化。2、原因：在 Vue 3 中，当你使用。

2025-06-12 10:56:52 69

原创 vue3+ant design vue实现下拉框绑定对象

1、一般情况下，下拉框只能接受字符串，但是有时字符串不满足需求，此时就可以使用下面方法来实现。

2025-06-05 14:06:04 108

原创 ES6中的Map与Set数据结构的简单应用

是一种键值对集合，其中键和值都可以是任何类型（对象、原始值等）。是一种值的集合，其中每个值都是唯一的，且值可以是任何类型。语法：map.set(键名, 值)保持键值对的插入顺序，并且允许使用任何类型的键。语法：map.get(键名)一、Map定义和基本用法。二、Set定义和基本用法。6、获取Map的大小。

2025-06-05 13:56:58 268

原创 git 如何解决分支合并冲突（VS code可视化解决+gitLab网页解决）

发布时会将各自的开发分支合并至发布分支上,但此时有个复杂情况就是分支A是第二次迭代的时候合并至1.1.1上了，此时分支B是第三次迭代的开发分支，是需要合并到1.1.2上的，此时有人就会问了，为什么B分支不在1.1.1的基础上创建呢？此时就会报代码冲突。# 3. 尝试将 develop 合并到临时分支(触发冲突):（这里也可以merge1.1.1分支，只是develop是调试分支，所有的开发分支都需要合并至develop分支验证通过才会合并至1.1.2上），这里解决的是B分支与develop分支合并冲突。

2025-06-01 23:51:25 911

原创 decimal.js库处理js浮点数精度误差问题

1、经常遇到前端计算金额的时候出现精度误差问题，导致前后端计算的金额不一致导致校验过不去的情况，相信有不少人写过Math.floor(e*100)/100来实现保留2位小数，但是这么写就会出现上面的精度问题。这里使用的是decimal.js库。6、获取计算结果：使用toNumber()方法将Decimal对象转换为JavaScript原生的Number类型，以便在Vue组件中使用。4、创建Decimal对象：可以使用Decimal构造函数创建一个Decimal对象，并传入要进行计算的数字。

2025-05-27 10:23:20 162

原创 vue3+ant design vue + Sortable实现多级表格列拖动

1、最近遇到个需求，需使用vue3+ant design vue +Sortable实现多级表格的表头允许用户拖拽移动。即当用户拖拽一级表头时，其对应的子级表头及数据应同步移动，并且只允许一级非固定表头允许拖拽。2、拖拽一次之后就不能继续拖拽了：解决方法通过监听动态销毁Sortable 实例，同时避免了内存泄漏。1、子级表头变化了，一级表头本身页面未变化：解决方法通过key来强制刷新页面。3、Sortable 未正确挂载，拖拽不动：解决方法正确设置挂载范围。

2025-05-08 15:13:33 347

原创大文件上传的解决办法~文件切片、秒传、限制文件并发请求。。。

1、项目背景：针对大文件上传，如果将文件作为一个请求去发送给后端，会有以下几种问题，首先是上传时间长，用户不能进行其他操作，包括页面刷新等操作，其次有的接口会设置响应时间限制，可能大文件还没上传完就触发响应限制了，这样对用户很不友好，那么怎么解决呢？2、首先前端针对大文件使用文件切片技术，将大文件切成多个小文件，然后再将多个小文件传给后端，由后端进行组合即可。3、依据文件内容生成唯一的hash值，可以避免文件改名后重复上传的问题。来根据文件的二进制内容计算文件的。

2025-01-16 15:45:23 767

原创盒子模型的外边距塌陷及解决方法和原因

当一个子元素的上外边距与其包含的父元素的上外边距相遇时，如果父元素没有足够的内边距或边框来分隔它们，这两个外边距也会发生合并。：当两个垂直排列的块级元素相遇时，上面的元素的下外边距和下面元素的上外边距会合并，取两者中的较大值作为最终的外边距。1、盒子模型的定义应该不需要说了，包含外边距、边框、内边距、内容区。：对于嵌套的两个块元素，如果给子盒子加向上的外边距时，父盒子会跟着掉下来，此时就是外边距塌陷。2、外边距塌陷原因：这里涉及到外边距的计算规则，可以理解成此时的外边距是公共的外边距。

2025-01-02 11:54:16 363

原创解决echarts图宽度自适应问题，设置100%宽度显示100px

1、原因：这里是因为你的echarts图表的盒子使用了v-show或class隐藏样式引起的图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px。2、解决方法：既然要保证初始化时DOM元素已经渲染，那么我们可以使用v-if，并搭配nextTick（）实现echarts图表异步加载，让其走在DOM渲染之后。

2024-12-19 20:13:29 880

原创 vue3+ant design vue实现日期选择器不展示清除按钮

1、代码：只需设置:allowClear="false"即可。

2024-12-16 13:47:36 344

原创 vue3+echarts 实现折线图（含x轴超长滑动显示，echarts图表销毁,动态修改图表宽度等）

【代码】vue3+echarts 实现折线图（含x轴超长滑动显示等）

2024-12-10 09:21:00 507

原创 vue3 +ant design vue实现给下拉框右侧添加叉号，实现清空

1、这个只需添加allowClear这个属性即可。

2024-11-30 09:43:45 212

原创 vue3+ant design vue 实现日期组件默认展示当前日期，并限制只能选择前3个月及之后的时间

【代码】vue3+ant design vue 实现日期组件默认展示当前日期，并限制只能选择前3个月及之后的时间。

2024-11-30 09:29:20 578

原创 vue3+ant design vue实现日期选择器默认显示当前年，并限制用户只能选择当前年及之前~

1、思路：之前想buxuyao当前年直接做赋值操作，实际上是行不通的，因为组件本身有数据格式限制，会出现报错，然后索性直接获取当前日期（YYYY-MM-DD）赋值给日期组件，这样不管你用的是年，还是月，都可以正确展示。

2024-11-30 09:25:45 740

原创 vue3+echarts实现鼠标进入某一个具体的echarts图表范围即图表盒子时变为小手

2、思路：很多博主都是使用z-index来提高层级或者pointer-events: auto来定义穿透，以及使用 myChart.getZr().on('mousemove', param => {})来判断鼠标是否移入图表中，但是实测是不满足需求的，有的方法是修改鼠标移入图表本身的形状，而不是整个盒子，完全不满足需求。1、效果图（需求：实现鼠标移入echarts的图表范围内变为小手，包含标题区，图表内容区即整个图表盒子区域）

2024-11-29 17:41:14 438