春晓_春眠花落-优快云博客

原创【vue+excel】导出excel（目前是可以导出两个sheet）

我就在现有的单个导出的功能上改造了一下，只支持导出两个（代码不够灵活，如果需要多个，还需要再优化或直接手动往里面加）3、在utils的公共js文件中，如common.js(自己项目定义的放公共方法的文件中)项目里经常用到的导出ecxel功能是默认导出一个sheet页。现在需要导出两个sheet，一个是总计，另一个是明细。5、在utils中新建ecport2Excel.js。4、在main.js中全局挂载。2、安装excel相关的库。1、导出按钮的点击事件中。

2025-03-13 14:32:58 391

原创【git提交代码】遇见git游离，代码提到head分支，切换其他分支后找不到的情况，已解决

在 Git 中，“游离分支”（Detached HEAD）是指 HEAD 指针没有指向任何分支，而是直接指向某个特定的提交。1、在项目中右击鼠标，打开git bash here,不要用cmd打开，cmd打开不够直观。----执行完这个命令之后，这个分支就有记录了，把对应的代码复制到本地或其他的方式保存起来。项目有很多分支，下午在项目文件夹中切换分支，切换之后没有核对是否切换成功。提交记录之后，发现不是我需要的分支名，而是HEAD。–把复制的代码重新整一下，让这个分支也有相同的代码。

2025-02-18 22:19:55 281

原创【干货分享】2025年可以免费问答的一些GPT网站-deepseek等免费gpt

2025年已经到来，大家也都陆续回归到忙碌的工作中。在新的一年里，如何更高效地完成工作任务，提升工作效率，是很多人关心的问题。今天，就为大家分享一些实用性很强的GPT网站，帮助大家在工作中事半功倍。

2025-02-10 13:42:45 578

原创【vxe-table】多选筛选项对列表的列进行动态的显示与隐藏

列表的组成部分由：一些固定的列，如:姓名，工号，以及需要动态显示与隐藏的列，如：出勤、旷工、事假、病假等假勤类型。1、通过多选框多选，展示选中的列，未选中的不展示。2、当多选框全部清空的时候，展示原来的所有列。

2024-11-05 16:51:21 497

原创【el-upload】不使用上传接口且拿到上传信息，处理成base64格式

【el-upload】不使用上传接口且拿到上传信息，处理成base64格式

2024-11-05 16:29:01 251

原创【vue+帆软】帆软升级，从版本9升级到版本11，记录升级过程及报错：FR is not defined

一直往下翻，在最底部有个2.2 在Web中使用，圈起来的就是要引入到index.html中的脚本。4、在点击打印的方法中，有两个地方有变化，一个是路径，一个是reportlet这个参数。在项目的静态文件夹public中的index.html中替换掉原先的版本9脚本。2、在vue.config.js中设置代理。初次输入用户名和密码后，后面就不会在显示了。然后点击的时候就会出现这个页面。1、帆软官网地址必不可少，帆软要升级，记录下过程。跳转过来就是版本11。3、点击打印的方法中。

2024-09-12 17:15:17 830

原创【el-table】横向滚动条加粗后，滚动到固定列下被遮挡，已解决

我尝试了几种方法都不行，比如找到.el-table__fixed-right .el-table__fixed-footer-wrapper ，修改bottom的值，无效。横向滚动条按要求加粗后，遇到的问题：列表的操作列是固定在最右侧的，当滚动条滑动到最右侧的时候，滚动条被遮挡了。如截图所示，普通列body的高度是362px（含横向滚动条12px的高度）固定列body的高度等于普通列body的高度 - 横向滚动条的高度。看红色圈起来的部分，固定列的body高度其实超了，所以挡住了滚动条。

2024-08-14 10:47:25 1092 1

原创【vue+el-table】实现表尾合计行分两行显示，一行显示勾选项之和，一行显示合计，已实现，具体思路解析

（3）定义summaryList数组，需要处理哪些列，就传这样的格式,包含要处理列的字段名，如：[‘payAmt’,‘receiveAmt’]（2）定义ckeckedResult对象，用于和包含处理列的字段名的数组，即summaryList数组进行对比，拿到需要处理列的选中项之和。（2）定义el，将表尾合计行分成两个上下显示的div，便于添加类名和修改样式。（1）在单选和全选事件中，调用表尾合计行方法。（3）在表尾合计行方法中，将勾选项之和回显。2、复选框勾选的时候和表尾合计行联动。

2024-07-15 17:40:27 1281

原创【bug】【vue+el-table】数据重绘,刷新数据（组件嵌套较深，数据结构包含children），页面未及时更新，已解决

这个bug应该不是组件嵌套过深的原因，而是新增的时候没有加children，组件的渲染依赖于特定的数据结构或状态，利用索引直接设置一个项，Vue 可能无法追踪它的变化。然后log打印父组件列表的数据，发现打印有值，但是页面上什么都不展示。父组件列表，用的是element文档上树形数据与懒加载示例的第一个。通过确定按钮，将勾选的list数组传到父组件，进行赋值操作。新的弹窗用来勾选数据回显到列表中，处理为当前项的子节点。弹窗中还有列表，通过弹窗中的新增按钮操作列表。列表页面，通过新增按钮打开弹窗。

2024-05-22 10:23:00 593

原创【bug】vue-treeselect在el-form表单中可以正常显示，在el-table中显示的是空的，添加 :append-to-body=“true“可解决

加这个 :append-to-body="true"就可以了，应该是样式影响的原因，组件添加 :append-to-body=“true” 属性时，这个属性会让组件的挂载点变为文档的元素，而不是它所在的父级元素，可以避免被遮挡，脱离原始的文档流。基本上就是一样的代码，但是在列表中就不显示。

2024-05-11 15:19:42 386

原创【vue+el-upload】当action=“#“,代表不使用默认上传，使用自定义上传，http-request获取文件流

点击上传

2024-05-08 20:05:02 2011

原创【vue+vue-treeselect】根据指定字段，如isLeaf(是否末级节点)，设置只允许末级节点可以选

(2)获取数据源的时候，设置下禁用判断，vue-treeselect的禁用是isDisabled属性。（1） :flat="true"一定要设置。（3）isLeaf有值就要禁用。

2024-05-08 19:33:15 544

原创审查元素时，hover等伪元素，只会在鼠标悬停在对应元素上时生效。一旦鼠标移开，样式就会消失，已解决

最近遇到个小小的问题通过控制台查看元素，只有在鼠标悬停在对应元素上时生效。一旦鼠标移开，样式就会消失即使我把右侧的这些都选上了也没用。

2024-04-11 14:23:12 765

原创 nuxt服务端渲染，用create-nuxt-app脚手架创建NuxtJS应用，报错 Cannot find module ‘node:util‘解决

因为node版本不匹配，我本地是14.5.0，我改成16.12.0，再重新npm run dev 项目可以正常运行。手动配置可以实现更多自己想要的，更自由一些。但是完整的实现非常复杂，官方建议使用nuxt，开箱即用。4、遇到报错： Cannot find module ‘node:util’vue文档中提到，可以直接通过配置，在vue的项目中准备 SSR 应用程序。安装成功，访问 http://localhost:3000/即可。2、使用nuxt创建项目。3、创建好之后运行项目。

2024-04-08 23:11:02 573

原创【bug】j解决vue项目打包时的报错，Cannot find package ‘babel-plugin-transform-remove-console‘ imported from‘xx’已解决

vue项目打包时报的错首先，遇到报错一定别慌，一定别慌，一定别慌~~~~

2024-04-02 11:00:22 690

原创【优化】在封装的组件中使用自定义指令，根据传入的参数判断是否执行自定义指令

一开始没有通过参数判断的时候，directives的bind我只写了el一个参数，然后发现传进来的变量不管true或false，都执行了自定义命令，这是因为我没有加第二个参数binging。例如，对于 v-my-directive，name 的值将是 “my-directive”。value (any): 指令的值，即在模板中 v-my-directive 后面括号内的值。oldValue (any): 如果正在更新的元素之前已经绑定了相同名称的指令，oldValue 将是上一个指令的值。

2024-03-27 19:44:57 552

原创【vue项目中点击下载】弹窗提示：离开此网站？系统可能不会保存您所做的更改，改为直接下载，不提示此弹窗内容，已解决

【代码】【vue项目中点击下载】弹窗提示：离开此网站？系统可能不会保存您所做的更改，改为直接下载，不提示此弹窗内容，已解决。

2024-03-15 10:35:09 3046

原创 web worker性能优化，vxe-table提高表格列拖拽和列宽改变等操作的性能，具体实现详解

数据是复制的，而不是共享的。worker.js 脚本文件需要被浏览器访问到，并且在主线程中通过 new Worker() 方法来创建一个新的 Worker 线程。2、Worker 是一个使用构造函数创建的对象（例如 Worker()），它运行一个具名 JavaScript 文件——该文件包含将在 worker 线程中运行的代码。3、可以在 worker 线程中运行任何你喜欢的代码，有一些例外：你不能直接在 worker 线程中操作 DOM 元素，或使用 window 对象中的某些方法和属性。

2024-02-23 10:28:52 1321

原创【vue2】vuex入门篇，彻底搞懂vuex

在工作中使用vuex，可能知道怎么用，但是没有仔细研究过，之前出过一篇【vuex存储保存数据、使用数据，超详细解说】，其实也没有把vuex说的很透彻，学习的过程就是先会用，能先应付开发，然后再抽出时间，慢慢搞懂它。本文不包含总结，共12553字数，共740行。年前开始写的，前后消磨了快一周才写完。新年里写的文章，所以祝看到此文的伙伴们，新的一年：一元复始,万象更新！！

2024-02-16 11:05:32 1305 2

原创【vue+vex-table】翻页保留复选框选中状态

在 reduce 方法的回调函数中，对于每个新的 item，先检查 obj 中是否有该 id 的键。如果没有，则将其添加到 prev 数组中，并在 obj 中设置该键的值为 1；如果有已选项 setCheckedRow，则遍历 listSource中的所有项，并检查是否有该项在已选数组中。将分页数据以key为1，值为数组的形式保存，比如当前分页是第一页selectedData：{1：records}，复选框事件中把当前页的存到对应的分页下，点击分页调列表接口时，再根据每一页的数组进行回显。

2024-02-06 18:03:12 1828 2

原创【vue】配置代理解决跨域详细篇--Access to XMLHttpRequest at ’http:xx‘ from origin’http:xx‘has been blocked by CORS

而我们正常开发的时候，项目框架已经搭建好，前期的东西已经配置好，我们只要关注具体的业务，调接口联调即可假设项目刚创建好，需要联调接口，vue推荐使用axios，这里对于axios不过多解释，基本上大家都知道，是基于XMLHttpRequests进行了二次封装报错中出现CORS，NO‘Access-Control-Allow-Origin’header，这个就是因为跨域了假如我们的本地是http：localhost:8080http：协议名localhost：主机名8080：端口号。

2024-02-04 10:00:13 20573 1

原创【vue】前后端不在同一网络下，前端解决跨域

/ 响应拦截器(res) => {// 调用完一个接口就进行-1}, 200);return res.data.list//可能从别处复制的时候是res.data.data，一定跟着后台返回的数据格式走},

2024-01-30 22:11:44 963

原创【bug】在子组件中watch监听父组件传过来的值，监听不到，已解决

【代码】【bug】在子组件中watch监听父组件传过来的值，监听不到，已解决。

2024-01-30 11:04:24 1731

原创【lodash.js】非常好用高性能的 JavaScript 实用工具库，防抖，深克隆，排序等

1、全局引入，在main.js中。

2024-01-25 18:13:42 1557

原创【js】三种导出模块的方式：分别暴露、统一暴露和默认暴露

1、直接导入。

2024-01-25 12:23:40 1545

原创【react】创建react项目+项目结构

当看到webpack compiled successfully，代表项目创建好了，会自动打开浏览器展示带有Reack 标志的页面。

2024-01-19 11:07:59 629

原创【react】基础知识点---jsx语法规则，js与jsx的区别

jsx和js渲染的效果是一样的。

2024-01-17 23:02:22 1030

原创【react】基础知识点-初识react，示例+react所需的3个js库

基础知识点的学习—不使用react框架，以引入js库的形式，现学习最基本的内容。react-dom.js：提供操作DOM的react扩展库。babel.min.js：解析JSX语法代码转为js代码的库。react.js： React核心库。

2024-01-16 23:03:22 504

原创【vue+Swiper】vue中使用swiper缩略图，展示一张大图及n张小图，点击小图切换不同的大图展示，完整代码

效果：这是在swiper官网上找的示例，swiper太强大了，有非常多不同的示例,有api，有教程，还可以下载示例代码。但是第一次使用，研究这个缩略图的实现还是花了几个小时，好在实现了。安装将swiper封装成组件可以复用，在components公共组件文件夹中新增swiper文件夹，新增index.vue选择API文档，Thumbs（缩略图），可以查看缩略图的使用示例ps：这里要补充下，示例其实挺清楚的，但是因为没有对应的html参考，所以我在这里多花了一点时间。

2023-12-09 10:54:43 2709

原创【vue3】处理数组方法，在数组中获取指定条件所在的数组对象等持续更新笔记~~

1、在数组中获取指定条件所在的数组对象。

2023-12-08 15:17:28 4255

原创【vue】vue-slick-carousel插件，实现横向滚动列表手动左右滚动（也可设置为自动滚动）

在npm官网搜vue-slick-carousel，查看更详细的配置。1、VueSlickCarousel 一定要设width: 100%如果设置了箭头展示，而页面中没有左右箭头，可能是样式影响了。2、carouselOptions具体配置项。3、allFlowArr要展示的内容数组。

2023-12-03 19:12:56 2901 1

原创【bug】vue create 项目名，bash: vue: command not found

2、笔记本可以直接在开始中搜：查看高级系统设置，点了立马跳转到对应位置，系统属性–环境变量—系统变量—选择path–选择编辑–新建，如果node存在c盘，例如：C:\Program Files\nodejs,然后保存。1：我的电脑–右击属性—系统属性–环境变量—系统变量—选择path–选择编辑–新建，如果node存在c盘，例如：C:\Program Files\nodejs,然后保存。创建项目的时候，报bash: vue: command not found。

2023-11-09 16:43:17 1046 2

原创 uniapp项目启动时检查版本，版本过旧提示：更新至最新版本，App简单版实现思路详解

效果：实现的思路比较简单，后期需要优化的话，会持续更新uniapp文档上有提到关于版本更新在文档中搜uni.getUpdateManager()（小程序的更新），会提示app的更新需要点击连接，跳转到其他页面查看。**

2023-11-07 20:17:19 1873

原创【uniapp+vue3/vue2】ksp-cropper高性能图片裁剪工具，详解

（2）点击确认按钮之后还是触发uni.chooseImage事件-----ksp-cropper不要包裹在有点击事件的标签中，单独放就行。（1）打开插件的时候没有占满整个页面—ksp-cropper不需要包裹在有类名的标签中，单独放就行。（2）点击确认按钮事件和点击取消按钮事件中，拿到临时路径和清空临时路径。（1）只要url有值就会显示插件，为空就会隐藏插件。

2023-11-07 14:10:50 866 1