- 博客(41)
- 收藏
- 关注
RSS订阅原创 export2excel.js纯前端进行多级数据同一张excel多sheet导出
效果图1：效果图2：如上图所示，图1是一级数据汇总，图2是三级数据汇总。业务需求：进行一键导出包含图1和图2的excel表。关键代码：在Export2Excel.js文件处添加这个导出函数，此处需要注意的jsonData格式为多维数组export function export2ExcelMultiSheet(th, jsonData, defaultTitle) { var data = jsonData; //添加标题 // debugger..
2021-10-15 10:22:06
2796
原创 elementUI el-table expand-row-keys来进行展开行
三级数据结构，需求是默认只展开一级；效果图如下关键代码示意图：此处Array里面存放key的字符串，而不是number
2021-08-27 17:42:46
6895
2
原创 Error in mounted hook : Error:please transfer a valid prop path to form item
问题出现场景：在el-select 绑定对象且回显数据情况下，控制台会报标题的错代码：回显接口返回也是entityVO的对象，数据正常回显没有问题，只有控制台报错，因为此处prop 绑定的是对象的entityId的属性值，并不是对象，所以在回显的时候 单独赋下值，问题解决。...
2021-07-26 11:16:29
14564
原创 el-select 多选模式下 手动输入文字内容不显示
问题：无论输入多少，始终显示一点点内容，并会闪烁以及出现蓝色光标解决：输入框文字不够宽，所以通过红框内容来加宽解决。
2021-04-12 15:27:36
580
原创 vue 弹窗中加载详情组件，关闭弹窗时，再次打开不走详情组件的接口（只第一次走详情组件接口）
表格行进行点击，显示弹窗,出现标题现象原因： 弹窗组件未销毁，也就是v-if 和 v-show的区别解决：在el-dialog 起始标签添加 v-if来达到每次打开弹窗是全新的。
2021-03-23 09:50:08
1108
原创 ag-grid组件打包到服务器 组件
项目背景：多模块化开发，只因为在A模块的main.js引入组件样式，未在另外B模块引入，导致部署到服务器该组件失效（布局错乱，样式丢失）解决办法：在多个模块共同引入（另外服务器默认进入的模块包是B,可能跟服务器默认有关）...
2021-03-18 13:42:23
187
原创 vue 集成ag-grid 组件，通过筛选条件操作列显示与隐藏
关键代码：this.columnApi.setColumnVisible(item,false),此处item的位置 为ag-grid列数据里面的colid,如无此项，可以用field的值来代替
2021-03-17 16:52:46
2621
原创 虚拟桌面使用vscode 安装的插件无法使用
安装：可以在物理机进行安装好之后拷贝进虚拟机（插件安装位置一般在C：用户/xxx/.vscode/extensions）,这里不再过多赘述。无法使用：在extension文件夹下找到对应插件的package.json文件，用VScode打开，找到vscode:xx.xx.x(这个描述的意思是限制该插件只能装在高于该版本的VScode安装)，看下是不是高于你本机VScode版本，是的话，把这里面描述的版本号手工修改成比你机子版本低，之后保存修改，然后在vscode进行重新加载该插件，如下图所示...
2021-03-16 10:14:47
513
原创 附件下载
下面的url是请求后端接口，返回的是二进制流，通过Blob转为blob对象，然后通过a链接的download属性，进行下载：this.$http({ url: url, method: 'POST', responseType: 'blob', data: qs.stringify(data) }).then(res => { // console.log(
2021-02-26 13:46:29
158
原创 vue el-input只能输入一个字母就是去焦点了
问题环境：el-table的数据是动态追加出来的。如下图箭头指示，此处需要可编辑，故采用scope写法来替换（prop属性键写法，据说可以规避标题的问题，因此处业务不同不再研究）解决：row-key 绑定的属性更换成别的（原先绑定的是可编辑的stepName），不用箭头指示的stepName,标题问题解决。...
2021-01-27 15:21:56
2034
原创 downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-83_bin
开发环境：vue+cli 多模块开发，多模块一同打包，命令行报标题提示。如下图：解决：这个是因为node-sass被墙掉了，导致下载不了 1、npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/这一行命令可以解决这个错误 2、设置系统变量，需要根据自己的node安装路径去设置，如下所示： 系统变量名称:SASS_BINAR...
2021-01-20 14:04:50
616
原创 注册cnpm之后运行项目（npm run dev之后出现‘webpack-dev-server‘ 不是内部或外部命令,也不是可运行的程序错误）
原因：安装依赖时需要统一使用npm或cnpm来安装，本人项目中注册淘宝镜像之前是采用npm install 安装，出现了混用。解决：删除node_modules依赖包，进行cnpm install 或者 npm install 来安装依赖包；
2020-12-17 21:43:24
356
原创 内网开发vue项目，npm安装插件失败
问题：利用npm install在内网环境安装插件失败。删除node_modules，重新下载依旧无法安装。思考：是否是内网网络问题？物理机安装插件无问题。解决：注册淘宝镜像步骤：安装cnpm1、npm install -g cnpm --registry=https://registry.npm.taobao.org 查看是否安装成功2、cnpm -v 如下图，则安装成功如出现无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.p...
2020-12-17 21:28:56
1095
原创 el-tabs 点击切换子组件，对应内容重新请求
A页面（暂且叫做父组件） template部分：此处的采用component 这个vue内置组件，依据 is子组件的name 来切换不同的子组件显示（后面的key是我自己项目这边的需求单独加的，具体情况具体分析。）A页面 script部分：加载的tabs切换的子组件，此处采用eventBus 来进行事件通讯。【原先（多个子组件写在component位置，采用v-if控制显示与否）采用父子组件通讯好使，但改成目前写法之后未起作用，子组件已触发，但父组件始终(包括事件名称采用全小写，thi.
2020-11-26 16:30:05
2818
原创 vue npm run build 打包失败
报错：解决：参考链接：https://jwdsk.cn/post-203.html、https://blog.csdn.net/alanfancy/article/details/84023940
2020-11-26 14:38:39
663
1
原创 Duplicate keys detected: ‘XXXXX‘. This may cause an update error.
代码环境:el-tabs出现此警示原因：key值不唯一，故更换key=item.name(原先key=index,因删除功能会导致index变更)
2020-11-26 13:02:57
566
原创 el-table复选框选中之后出现漂移
问题：解决：因为在添加样式的时候将 style="width:100%" 覆盖掉了，导致出现这个bug，大家不要踩这个坑。
2020-11-19 10:16:38
461
2
原创 vue 项目部署服务器后 自定义样式被覆盖elementUI组件自带属性覆盖
问题：vue 项目部署服务器后 自定义样式被组件自带属性覆盖解决：1、引入顺序的问题。css样式存在引入顺序问题，引入App之后引入的ElementUI样式 2、修改main.js，调整组件引入顺序 import ElementUI from"element-ui" import "element-ui/lib/theme-chalk/index.css" //确保在import APP之前引入 ...
2020-11-12 18:27:48
1199
转载 vue+elmentUi实现table列筛选动态展示功能
table列筛动态选展示功能的实现前言： 用过elementUi的小伙伴都知道，用它配合vue来写前端页面是很爽的，在大多数情况下，直接拿过来使用就能满足产品需求。就拿table组件来说，从简单的表格展示到到复杂自定义，开发者把很多可能涉及到的场景都考虑了进来。但是细心的你可能会发现，在使用table组件的时候，行是动态加载的，很多的操作都是对行进行的，而列是在一开始使用的时候要展示哪些列就写死了，如果展示的列很多，就算使用了固定列啥的冻结，用户在操作的时候依然会有很多不便，那么能不能通过筛选操作动态的
2020-11-03 15:31:41
2862
1
原创 Vue 强制替换元素/组件
场景：今天在项目中进行组件强制刷新的时候，遇到一个问题，记录下，与大家分享下采坑 填坑记录。问题：在A（兄弟）组件中通过按钮切换到B（兄弟）组件，然后再次点击进入A组件的左侧菜单（父组件menuParent），重新进入A组件，发现页面显示的是B组件内容，于是想到了父子组件传值，通过v-if来修改AB的切换（页面结构是<A v-if=“true”></A> <B v-else></B>）,很遗憾，没实现效果。发现官网有一个api key解决：通过men.
2020-09-29 10:13:32
846
转载 怎么解决小乌龟Git(TortoiseGit) gitlab 总是要求输入密码的问题？
1. 怎么解决小乌龟Git总是要求输入密码的问题？TortoiseGit一般也叫git小乌龟，是Git的客户端版本，不需要输入命令，可视化操作，比较人性化，有中文版。当你在用TortoiseGit拉取或者提交代码的时候，可能遇到过git小乌龟总是要让你输入密码，无法拉取、提交代码，见下图。怎么解决这个问题？1.复制私钥文件id_rsa，将复制的文件的文件名改为id_rsa.ppk。2.打开TortoiseGit的安装目录，找到puttygen.exe，双击运行。3.点击Loa
2020-09-23 17:43:04
4696
3
转载 $ git push -u origin master 推送到远程库出错
1、错误描述：出错场景描述：github上创建远程仓库的时候选择添加README.md文件，git bash连接远程库，然后执行push操作，出现下面的问题$ git push -u origin masterTo github.com:XXXX/DesignPatterns.git! [rejected] master -> master (fetch first)error: failed to push some refs to 'git@github...
2020-09-23 14:40:22
332
转载 vue-cli 创建项目 兼容IE
因项目需要，今天给大家安利一篇好文章，关于Vue-cli脚手架搭建的项目兼容ie。（原文链接：https://segmentfault.com/a/1190000019466591?utm_source=tag-newest）需求: 项目(vue-cli3.0)后期要求兼容IE8以上版本浏览器,IE8及以下提示当前浏览器版本过低vue不支持IE8及以下的版本,同时如果是使用vue-cli构建的项目也不能在IE8以上的版本(ie9,ie10,ie11)中运行方法一:适用于vue-cli3.
2020-09-14 20:41:26
823
原创 el-select 下拉框在el-table-column中 保持互不影响
问题：如果el-select是嵌套在循环或类循环的外层代码中，会出现选中其中一行的下拉框某选项，其余行的el-select显示为一样。解决：如下段代码，标颜色加粗部分。希望对你有帮助。<el-table-column label="操作"> <template slot-scope="scope"> <el-select placeholder="操作" v-model="scope.row[scope.colum...
2020-09-07 17:46:54
2285
1
原创 使用sortablejs 给table排序遇到的无法拖拽
背景：在vue+elementui el-table前置开发环境下，需求是table可以排序，所以便使用了sortablejs.问题：在单独页面使用无问题，但在其他页面中嵌套使用带此拖拽功能页面的时候（el-dialog、el-tab-pane），发现拖拽失效了。解决：原因是未获取到tbody。...
2020-09-03 16:37:39
5030
19
原创 分享vue+elementui 采用el-row布局 小坑
分享vue+elementui 采用el-row布局 小坑问题：24份布局，分4个输入框，出现文字与输入框各在一行的样式bug。解决：在el-form-item 标签写入的label 属性“：”改为英文状态下“:”.
2020-09-03 15:52:19
3270
1
转载 vue中如何使用i18n实现国际化
vue中如何使用i18n实现国际化javascript vue.js vue-router i18n 发布于 2018-09-182020 年新版 Springboot 2.3 教程 >>>????????????一、前言 在4k广告机中需要实现多语言切换，这时候接触到国际化，前端框架无数，其中几种热门的框架都有相匹配的国际化插件工具。比如：vue+vue-i18n angular+angular-translate react+react-int
2020-07-21 16:22:00
432
转载 VSCode拓展推荐（前端开发）
一、食用说明相似功能的插件，不推荐全都装上，请挑选一个使用 本列表所有插件均已测试使用过，但不代表不存在问题 任何插件本身的问题，请到对于代码仓库提交issue二、拓展名称 简述 Auto Close Tag 自动闭合HTML标签 Auto Import import提示 Auto Rename Tag 修改HTML标签时，自动修改匹配的标签 Babel JavaScript babel插件，语法高亮 Babelrc .babelrc文件
2020-07-16 19:06:54
379
转载 Promise、async、setTimeout异步执行顺序问题
题目一：console.log('script start'); setTimeout(function() { console.log('setTimeout');}, 0);const newPromise6 = new Promise(function(resolve, reject) { resolve(console.log('promise1'));});newPromise6.then(function() { console.log('promise2')
2020-07-03 20:39:40
1321
1
原创 Event loop、宏任务与微任务
背景js是单线程语言，但js的宿主环境（比如浏览器，Node）是多线程的，宿主环境通过某种方式（事件驱动，下文会讲）使得js具备了异步的属性。浏览器js是单线程语言，浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求
2020-07-03 20:25:31
237
1
原创 实现 A、B、C三个函数依次执行
var A=function(){ //逻辑处理}var B=function(){ //逻辑处理}var C=function(){ //逻辑处理}一、Promise方法 A.then(B).then(c)二、async/await async function fn(){ await A(); await B(); await C(); }
2020-07-03 18:15:20
620
转载 DOMContentLoaded与load的区别、触发时机
一、DOMContentLoaded 与 load 事件关于 DOMContentLoaded 和 load 事件，MDN对他们是这样描述的：DOMContentLoaded 文档地址、load 文档地址。DOMContentLoaded 意思就是：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。load 意思就是：当一个资源及其依赖资源已完成加载时，将触发 load 事件。区别小结简而言之，二者触发时间
2020-06-26 13:31:38
379
转载 【ES6】两个例子明白箭头函数this指向
【ES6】两个例子明白箭头函数this指向前言：es6箭头函数没出现之前，this的指向不是函数被创建时绑定，而是被怎么样的方式调用时绑定的。而箭头函数刚好相反，箭头函数的this指向是函数被创建时绑定的，它的指向就是当前词法作用域中的this，并且不会因为被怎么样的方式调用改变绑定.例子1//这里只能用var定义变量,let,const定义的变量，不是绑定在window下。var str = 'window'; const obj = { str:'obj', native
2020-06-25 20:21:44
99
原创 前端代码（多方面）性能优化
前端性能优化结构层1、布局采用 DIV+CSS 替换table布局减少代码2、删除多余空格和换行，有效压缩代码占用字节3、涉及到table展示数据 采用table布局4、减少对DOM的操作表现层1、图片尽量采用 CSS Sprites,它允许你将一个页面涉及到的所有零星图片都包含到一张大图中。2、尽量少使用 子选择器 （浏览器对css解析从右往左）行为层1、js封装准则：高内聚、低耦合2、减少闭包使用，会使内存泄漏3、绑定事件，要使用事件委托，减少循环DOM绑定事件4、函数节流、
2020-06-25 16:11:54
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人