seeeeeeeeeee的博客

本文介绍了Element UI表格可视区域监测的实现方法。通过ref获取表格实例，在mounted钩子中绑定滚动和resize事件监听，并使用防抖函数优化性能。核心逻辑是：1）计算可视区域高度和滚动位置；2）根据行高推算出当前可视行范围；3）从数据源中提取可视行数据。该方法适用于需要实时监测表格可见内容或实现懒加载等场景，通过500ms延迟执行有效减少了频繁触发的问题。

对于一些审批流程，可能会用到这个功能，通过这样一层层的加下来，弄一个审批流程的数组，然后根据这个来审核是否都通过审批，这里是简单的弄一个样式的demo，功能自由发挥。

右边普通按钮通过自定义指令控制，这里自定义指令写法是html版本的。左边是组件按钮，通过disabled控制。点击后的效果，一秒后会恢复可点击。

这句话的意思就是有缓存的话拿缓存的语言类型，没有就默认用中文的，然后你就可以全局都刷新保持语言类型了。总结就是，安装好插件后，配置几个语言的js文件，每个词都要在每个js内写一遍对应的语言，然后通过切换js文件拿到对应的语言，实现翻译的效果。1，在你的语言文件内用花括号然后内部用一个变量接收，在你的也没事，调用$t 的时候，第二个参数传一个对象，里面分别是你对应括号内的名字和值就可以实现动态数据。1，你在某一个设置语言的页面切换语言，然后把切换的比如从zh切换到en。然后把en保存到本地缓存里。

表格样式可以在这里面调整，就是直接加在表格的标签上写样式，tr td 之类的。2，使用方法，组好表头和内容就行，图片会自动识别的。1，js代码，把这个代码复制到一个js文件内。

1，html部分：写一个表格，然后数据填进去。2，css部分：把表格样式搞一搞。3，js部分：这样复制过去就行了。4，点击打印按钮，搞定。

需要获取数据的时候就promise.all（数组）.then（）就可以拿到返回值，把请求用promise抱起来，请求成功再返回resolve。这里是通过async await和promise配合完成。实现逻辑：先定义一个空数组，然后循环把请求加到数组内，然后promise.all（数组）就自动按顺序执行了，比如循环三次，顺序应该是 A,B,A,B,A,B。你按什么顺序发送的，就会按什么顺序返回值。返回值是一个数组，是多个请求的返回值，可以通过promise.all来实现。然后用await阻断，按顺序执行。

3,下载各个版本的node网址是这个，下载方式就是进去看那个V开头的版本号，找个你想要的版本，然后点开进去找对应你电脑系统的下载就行了，比如我是win10 我就下了下图红圈标出来的那个。1，找到你node的安装路径，不知道的可以cmd命令行中输入这个命令就可以看到了。4，找到node文件夹路径，去把里面的文件全部替换成新的文件。然后node -v 看一下，版本就更新了。2，查看node版本的命令是这个。

一直用的vue2写的。一直没有接触过vue3没有机会使用工作中自己又比较懒，一直拖着没学，因为感觉学了不用，过段时间我就忘得差不多了。这次刚好公司有了这个vue3的项目，我就来学习一波，然后实战练练刚好记得牢一点。中途遇到的各种问题和我学习到的一些vue3的语法等。就在这里记录下来学习笔记。方便自己忘了来看看，一直保持更新！！路由配置 element Plus 组件默认英文 全局转中文

最近遇到一个功能，需要的是把表格的列可以配置，用户可以根据自己想要看的数据来改变表头列显示哪些隐藏哪些。于是我做了两个版本。第一个版本是自由搭配的。就是提前顶号所有的列，然后自己可以拖拽到想要位置顺序。也可以自己新增一个二级表头自定义一个名称把表头都拖进去组成多级表头表格。不过这种的毕竟复杂。第二个版本就简单一些了，是固定的列，比如十列写好了，然后用户只能在这十列里面选择显示或隐藏哪些。位置不能动，文字也不能动。就是单纯的显示隐藏列。

经常遇到输入框需要限制只能输入数字的，因为用户很离谱，明显输入数字的地方他非要输入英文或者中文但是用到UI框架或者自己写方法验证表单比较麻烦为了一个输入框专门去弄一个验证很麻烦所以这里就整合了两种自定义指令的方式，更加方便使用vue版本和 html版本都有。1，弄一个input.js文件复制下面代码vnode.locking = true//解决中文输入双向绑定失效})vnode.locking = false//解决中文输入双向绑定失效})//输入监听处理return;

这个合集功能主要是为了处理前端计算数据因为我的项目有很多表格公式计算是前端写的所以有一个很麻烦的事情就是加减乘除的时候因为各种情况导致报错最常见的就是后端传的值不规范有时候这个字段没有值的时候给我返回的是数字0，有时候字符串数字0，有时候null，有时候 ’ ’ 等等之类的不确定情况所以我就写了几个方法统一把后端的数据丢里面直接校验转换，凡是没有值的统一都转0这样计算不会报错。

【代码】【递归汇总】前端各种递归方法记录合集。

数组对象根据某一个字段排序。

使用方法：filterConditions 是筛选条件，key要和筛选的数组中的key一致，如果筛选条件没有传或者传的空，会返回原数据不筛选，如果有值了会筛选。主要对比的地方在这里 p[key] == queryObj[key]如果有其他特殊需求的选项或者值需要返回原数组的就自行增删。是因为我下拉框选项中有一个全部的选项，拿到的值是0.我这里是直接对比是否一致的，如果你需要模糊查询，这里注意，返回原数组的判断条件可以自行设定，第二个参数传的是需要过滤的数组对象。需要返回所有数据，所以我加了一条，

今天做到了企业微信在网页上扫码登录的功能要求就是登录的时候可以点击企业微信的图标，然后弹出扫码登录的二维码扫描二维码登录，跳转拿到code然后把code发给后端后端根据code获取对应用户信息，然后返回给我，我登录到系统首页。

功能解释：遇到的一个需求，是表格的tabledata数组。里面有科室医生还有很多消费指标等数据。然后需要我排序后把科室放在一起。然后在每个科室下面添加一行数据，是小计行。用于计算上面相同科室的所有数据汇总。然后最下面再来个合计行，加上所有的小计。

2，差的时候调用这个this.$refs.tree2.filter(this.title);里面的title就是你搜索的值。1，在tree标签上加上这句话:filter-node-method="filterNode"这个方法复制下面的，只需要把data.title修改成你字段的名字就行，比如你的字段叫name就是data.name。这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来。这个是用的官方文档的那个过滤方式，可以参考官方文档看一下。效果图这样的，会把所有的有这些关键字的节点都展开。

这是最近在看这些东西，因为看别的地方是用脚手架直接用的。我这个项目想要在html上直接使用。所以我就试了下如何在html上使用vue3语法目前摸索出来的是这样可以使用。记录下来供参考，如果有不好的地方后续改进。

上次做了一个移动端的表格功能，纯表格的那种。跟PC一样，但是我一直觉得在移动端上写表格很糟糕的体验，毕竟手机就那么大。这不合理。但是我这公司又需要把PC端的表格的数据展示在移动端。导致我只能去试试看怎么排版比较好。由于网上也是一直找不到什么案例参考，所以就自己想了一个排版供大家参考。如果各位有更好的排版方式请发我一个图学习一下。

问题是这样：我的项目中，有一个角色管理的页面。以前的老代码，直接用el-tree渲染的树形结构，勾选设置对应的权限。其他的部门倒是还好，但是涉及到老板的部门设置的时候，由于我们这边的权限太多，部门也特别多，而老板又是有很多的权限，导致我们一次需要渲染出一大堆的tree结构之外，还需要回显一大堆的勾选。这就导致别的人设置可以，但是老板设置权限的时候就会卡住几十秒，甚至卡死浏览器。所以没办法，只能动手优化一下老代码，让他快一点。这样的属性结构，有很多的层级el-tree懒加载的功能，一层一层的加载，让页面不会

最近刚好遇到了这么个任务需要我在企业微信中内嵌一个自建应用，用于打通跟我们医院后台系统的数据对接。这样就可以直接让客服们在企业微信上点击右边页面操作后台的数据了。这可是给我踩了好多坑。毕竟从来没有做过企业微信的开发，有点懵。也是踩了好多坑后，这里写一个帖子汇总一下我经历的全流程开发当然这是基础的流程啊。因为我的功能要求也不是很高。后面如果开发更多的东西再补充。

最近做到了一个移动端联系人列表功能但是不让使用移动端的ui库，只能使用uniapp的组件所以就发现了这个索引列表组件但是使用过后发现有一点问题，比如我需要头像，但是他没有自带图片功能。比如我使用过后，我自定义了导航栏但是被覆盖住了，把导航栏顶没了。这里我都一一的解决了，所以这里记录一下。完整代码直接发出来看吧问题点是：这个组件给自己的最外层盒子加了个定位，在这里所以就造成了他是脱离文档流的，然后会导致比如你再上写了其他的组件比如搜索栏，

这个tabs功能是很多移动端项目都要用的最近我刚好遇到了这个功能因为我们项目不让用uview等组件。所以只能用uniapp自带的组件uni-ui但是问题就是这里没有这种滚动的tabs标签组件用啊。所以万不得已之下，我cv工程师只好动动小手写一个组件了。刚好这里也发出来保存一下，以后在用到可以直接复制了。

由于最近需要做移动端的项目有个pc端的后台系统里面需要移一部分页面过来而里面就有很多的表格，我就开始惯例网上先找前人栽的树，我好乘凉然后找了一圈发现，不管是主流的移动端ui库或者网上自己写的帖子，或者uniapp的插件网站都没有看到符合我要求的表格，然后如果要改别人的源码那我看代码都要看很久，好切有些还奇奇怪怪的bug不兼容可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错，我也改过别人的源码了，后来放弃了。H5，小程序兼容表格。移动端表格功能。多端兼容表格功能

最近遇到的需求，需要在html页面上用vue的混入功能然后我网上找了很久没有试出来然后就自己琢磨怎么弄，没想到还真试出来了。这里就来记录一下，万一以后又遇到这情况，知道如何混入了- -！

这是html版本的。只是引用了vue的语法。这是很多公司会出现的一种情况，就是原生的页面，引入vue的语法开发这就导致有些vue上很简单的功能。放到这里需要转换一下以前写过一个vue版本的帖子，现在再加一个html版本的。

这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多，那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里就专门又写了一个demo，用于处理这种情况如果需要看表格单元格点击后变成输入框，然后焦点消失后直接更改的模板，可以点击这个帖子点击单元格变输入框。

像这样的，我是用的第一列ks（科室）来排列的。a b代表每一行的数据。这里是每一行是数字的话就用减号排序，ab两个变量调换一下位置就是反过来的。替换成你们自己需要的字段名就可以了。tableData代表表格数据。比如你表格想要第一列按名字排序。那么就这样，用大于小于号来排列。我这里ks就是表格中的字段名。

这是最近遇到的功能，经常会需要一个表格可以编辑数据类似于excel那种点击一下单元格就可以编辑数据，修改后鼠标移动出去光标消失就会保存数据给后台这里记录一下实现方法，其实也比较简单就是通过角标来判断显示隐藏的。

最近遇到的一个需求，就是html页面需要组件化开发，然后找了一圈，发现很多组件化开发不好用一般就是几种，比较用的多的一个是iframe嵌套页面，一个就是通过js生成页面写组件。感觉都挺麻烦的。就想着有没有能像vue哪样简单的组件引入方式。而且iframe加载也慢。没有组件快。后来发现了这个httpVueLoader.js非常好用。只需要引入这个文件，然后其他使用方法和vue差不多了。稍微有点变动可能就是传值方面。传值下面也给出了方案。集中传值的方法应该大体是够用了的。

这个功能也是很多地方会用到的。一般使用的地方是比如需要设置白名单或者黑名单然后页面上会有一个textarea文本域。在文本域中输入多个ip地址，输入一个回车换一行。然后点击保存后，把数据通过逗号隔开的格式传给后端后端再去拿到每一个ip地址做一定的操作所以这里记录一下逗号分割的方法因为我在网上找了很久，看到基本写的都不是我要的。

这是一个很常见的需求啊，因为很多公司都会涉及到写表格展示数据那么在某些公司内就会出现为了让数据更直观的感受到而让你给某些行和列用颜色标出来。使得看起来更方便那么这里就汇总一下常用的横竖合并以及横竖颜色底纹如何实现。

为什么要使用阿里图标库：图标现在是很多地方都会用到的一般我使用的时候都是直接在ui库中比如elementul自带的一些有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显

如果出现了调用不起来的，没反应的，看一下uni.requestPayment内的参数是否错误。前端在这个请求的成功内继续调用微信的方法uni.requestPayment。然后就是正常的支付了。把后端传给你的6个参数按我这样写上去，就可以调用起微信的支付功能了。然后先请求后端的一个方法，把你的价格还有openid之类的传给后端。点击按钮后触发支付方法，就是我下面写的这些代码，复制就可以了。如果你是手机上测试，就是直接掉起支付，跟上面的图一样。首先前端写一个页面，简单说就是有一个输入支付金额的。

微信开发者工具报错 系统错误，错误码-1，undefined最近写到了H5公众号，需要微信授权的功能。这里记录一下授权的流程和踩了个坑。

这几天在做的一个需求，就是要写一个小程序端的页面，用于跟客服聊天。然后就用到了websocket技术，以前我做过网页版的，但是做小程序后发现网页版的逻辑放过来没问题，但是很多的方法和api是不生效的，所以又查文档专门看了一下对于的api，踩了一些坑后来记录一下，方便下次复制！1，页面信息展示，根据后台返回字段，分左边和右边展示2，输入后点击发送按钮，可以发送消息，通过websocket传给后台3，进入页面后链接websocket。

这三个功能是所有项目基本都是常用的功能上传图片，上传文件，上传视频功能我最近也是又在做上传文件的功能然后发现以前写了但是没有记录，导致又要从新弄很麻烦所以这一次直接一次把三个常用的功能代码都开个帖子记录下来，方便以后复制。这里采用了vue-elementul来实现。主要使用了elementul内的el-upload组件完成

最近遇到的需求，把html转成pdf文件下载导出。目前网上看了下，有三种方法，但是其中两种需要后端配合一种是纯前端实现的，比较简单。所以就使用了这种。也就是html2canvas + jspdf 的这种方法这种方法实现的思路就是，通过html2canvas 把元素内的数据截图出来成一个图片然后把这个图片通过jspdf 方法转成pdf格式输出出来但是也有缺点，就是只是一个图片，而且清晰度也没有那么高。只能说勉强实现一个需求，先应付一下，后续会继续看其他的写法，然后更新。

目前很多项目需要用到websocket功能简单的讲解一下这个功能。简单来说就是，以往我们发请求只能前台给后台发但是如果我们遇到比如类似聊天一样的功能，别人发信息给我。我们就处理起来很麻烦，当然也有办法，就是我们前端设置定时器定时请求后台拿到别人发给我的信息。但是很明显，这不是一个好办法，如果一秒一请求，那服务器顶不住，毕竟用户不是你一个。如果间隔时间久了，那别人发个信息给你，你都半天看不到，那还有人用你的软件吗。所以这时候就出现了websocket。