- 博客(83)
- 收藏
- 关注
RSS订阅
原创 vue.js 实现导入json解析成动态el-table树表格（接口文档功能）
一、需求描述：前段时间接到一个需求是做一个类似接口文档的显示功能，将一段json数据贴到里面就可以自动解析出json数据的每个字段的类型和层级关系，用element组件的树表格的形式展示，并且可以手动新增、修改和删除某个数据字段。{"name":"lemon","sex":"女","age":18,"hobby":{"hobby1":"敲代码","hobby2":"跳恰恰"},"likeArr":["水果","青菜"]}3.点击确认后树表格自动展示贴入的json数据，如下图所示；
2023-01-29 16:29:00
5165
24
原创 js修改对象数组的key值
实例：将dataOld这个对象数组的对象中的属性key变成dataNew中的形式；方法一：使用map循环，在map循环内创建一个新对象，将item要改变的key赋给新创建的对象里面新key值，然后push给一个新创建的数组dataNew即可；方法二：使用map循环 + replace替换，通过循环然后将子类JSON.stringify后采用replace来改变属性key；方法三：使用forEach循环 + for循环，通过Object.keys()来改变属性key；结果：...
2022-04-24 13:55:05
20302
5
原创 vue.js el-tooltip根据文字长度控制是否提示toolTip
一、需求：如何判断当前文本文字是否超出文本长度，是否需要出现提示toolTip。1、表格字段鼠标放置el-popover出现 “引用主题” 的具体内容；2、定义isShowTooltip控制是否展示提示文字tooltip;3、对应的鼠标放置触发的方法实现；
2024-02-21 13:34:11
661
原创 Vue ElementUI中el-table表格嵌套样式问题
1、表格定义唯一值row-key="indexId"和类名:row-class-name="getRowClass"1、展开图标每条数据都展示了，实际上接口数据并不是都有children数组；1、两个表格嵌套，当父表格有children数组时子表格才展示；2、在表格嵌套后，打开子表格，高亮显示在经过子表格后对应不上；2、子表格数据少于父表格展示字段，且对应固定操作列不同；3、父表格的操作列固定在右侧影响了子表格的显示；4、滑动到表格底部时，父子表格的固定列对不齐；
2024-02-05 12:14:45
2601
原创 关于jointjs的详细介绍
JointJS是一个专注于图形可视化的js库，用于创建交互式的图形和图表。它基于HTML、SVG（可缩放矢量图形）和CSS（层叠样式表）技术，主要用于在Web应用程序中实现可视化图形编辑器或图表展示（流程图、关系图和定制化图形）。//生成画板var paper = new joint.dia.Paper({ //生成画布});
2024-01-11 17:50:08
1451
原创 vue.js el-table 动态单元格列合并
一个展示列表，表格中有一部分列是根据后端接口动态展示，对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的，则正常展示，如果是’类型2‘的数据，则合并当前数据的动态表格。3、 在表格上使用:span-method="arraySpanMethod"方法触发表格；4、在arraySpanMethod方法内接收数据处理合并；2、在表格上对要合并的单元格类型进行区分；1、先将普通表格实现，不考虑合并效果；
2023-12-04 17:00:51
1361
原创 electron桌面应用webSoket实时弹框提示实现
1、当有弹框提示的情况时，会弹出如下提示，点击查看自动跳转到当前地址，点击关闭则关闭当前提示窗口；一、实现效果：网页端或者移动端进行了审核操作，在电脑右下角提示用户查看。3、在src文件夹下新建remind.html实现提示弹框具体内容；1、在主进程main.js中创建弹框，并确定弹框的位置；3、在登录成功后使用webSoket实时监听消息；4、主进程收到消息后触发提示弹框展示；2、登录成功后获取实时信息弹框提示；4、综上所述，即可完成桌面提示功能。2、编写弹框内容和样式；
2023-11-21 17:06:37
1304
1
原创 electron项目开机自启动
2、在渲染进程login.js中，获取用户操作并localStorage存储数据，保存用户的操作；4、在主进程main.js中，收到登录后的消息，自动配置是否开机自启动；5、在渲染进程login.js中，重新登录时判断是否勾选开机自启动；3、在渲染进程login.js中，在登录成功后设置是否开机自启动；1、在渲染进程login.html中，画好界面，默认勾选；一、效果展示：界面控制是否需要开机自启动。
2023-11-21 16:14:47
1506
原创 Electron入门
Native API ： Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些。Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。Node.js ：让Electron有了底层的操作能力，比如文件的读写，甚至是集成C++等等操作，并可以使用大量开源的。命令行启动一下Electron，出现下图弹出则安装启动成功；4、运行项目，在终端里输入。
2023-11-21 13:44:07
566
原创 vue el-table字段点击出现el-input输入框，失焦保存
【代码】vue el-table字段点击出现el-input输入框，失焦保存。
2023-11-20 15:16:11
1363
原创 vue.js处理数组对象中某个字段是否变为两个字段
产品要求做一个时间步骤条，使用目前后端已返回的数据进行操作实现。时间步骤条要求日期和时间分开显示且相同日期只显示第一个日期。字段表示当前到达第几步，从0开始，对应显示数组的前几个展示。后台返回的是一个整的日期时间字段。图左边为实现效果，右边为后台返回的接口。
2023-10-07 15:32:25
158
原创 vue pc端/手机移动端 — 下载导出当前表格页面pdf格式
一、需求：在手机端/pc端实现一个表格页面（缴费单/体检报告单等）的导出功能，便于用户在本地浏览打印。1.将要打印的页面转换成图片（ 用到的组件 html2canvas ）；2.然后将图片导出成PDF（ 用到的组件 jspdf ）。
2023-09-26 13:50:11
1095
4
原创 响应式赋值Object.assign()和JSON.parse(JSON.stringify())的区别
前言：今天优化代码的时候发现了Object.assign和JSON.parse(JSON.stringify())的区别。需求：点击编辑弹出编辑框，修改后的内容点击认按钮修改后的数据更新回显到原列表。对比：Object.assign。
2023-07-24 10:42:08
320
原创 vuejs清空表单数据、删除对象中的空属性公共方法
对于复杂数据，使用element自带的方法可能不能满足我们的需求，所以可以封装一个公共方法在全局。
2023-07-10 18:11:51
1565
原创 vue 根据分辨率自动调整css背景图片
一、场景：在不同的分辨率下使用同一张图片会出现拉伸或者压缩等变形情况，通常设计师会做两张图去适应1920和1440的分辨率，根据给定的图片对应不同分辨率显示。
2023-06-06 10:17:20
587
原创 vue 自定义el-table穿梭框功能
一、需求描述：前段时间接到一个需求是点击做一个类似穿梭框的表格点击选中功能，弹框的左边是全部数据展示，点击表格行数据可以选中自动增加到右边的已选框，并且可以手动删除、重置选中数据。点击确定后到展示到主页面，被选中的数据打开弹框不能再次选择。
2023-06-05 16:18:52
2300
2
原创 git常规操作 | 将A项目的某一分支迁移到B项目上
1.重命名分支（如果修改的分支只是在本地，没有推送到远程，只需要执行该操作即可。3.创建新分支(newdev)，并把当前分支(master)内容复制到新分支(newdev)中。1.点击从...创建分支，输入要创建的新分支的名字(newdev)按下enter键确认；3.在本地新建一个分支，该分支的名称最好与项目A中新增的那个分支的名称相同以便区分；3.清理本地不存在的远程分支，如别人删除了dev,但是你本地还有，执行该条命令。5.建立远端分支(newdev)和本地分支(newdev)的关联。
2023-04-04 13:22:55
3786
1
原创 TypeScript(ts)笔记总结01
一、基础类型二、接口三、函数类型四、类类型五、类六、继承七、多态注：出自B站尚硅谷Vue.JS教程快速入门到项目实战视频的笔记总结，感谢~~~
2022-12-29 17:55:20
258
原创 vue3+ts项目 笔记总结
1.在终端新建项目输入：vue create vue3-ts2.接下来的每一步如图所示：注意要通过空格选中TypeScript
2022-12-21 17:59:46
3581
1
原创 vue 更多筛选 列表字段动态搜索
一、需求：表格常用功能经常有字段筛选、更多字段筛选弹框来过滤出我们所需要的数据。每一个查询字段都会调用一次查询接口。1.更多筛选字段获取，触发接口查询。点击确定按钮绑定触发的方法；2.列表页面在点击确定之后就触发了绑定在dialog的方法；4.监听在queryForm，自动触发表格接口调用方法；3.接口方法处理获取参数；
2022-12-14 14:55:18
2151
原创 vue el-upload实现图片和文字上传
slot="file" slot-scope="{ file }" 自定义插槽，可以在里面实现输入框。:file-list="imageList" 图片都存到的自定义 imageList 数组。:before-remove="() => false" 防止按下删除键图片和文字被删除。:before-upload="beforeAvatarUpload" 上传时的校验回调。:action="fileUrl" 调用接口自定义的fileUrl上传图片到的服务路径。
2022-11-25 18:53:39
4920
8
原创 vue.js 回显textarea入的空格和换行
一、场景：用户在表单或者textarea中输入的带空格和换行的内容提交后，在其他地方查看输入内容必须与输入的内容保持一致。
2022-11-23 11:35:44
5174
2
原创 vue 双向锚点实现 简易版（scrollIntoView）
一. 需求：左边是内容板块，右边是目录结构，点击右边内容跳转到左边相应位置展示，滑动左边内容右边目录自动跳转。
2022-11-11 16:24:59
4788
7
原创 vue 数组中不满足条件跳出循环
一、场景：在表格中选中的数据在右边显示，在点击确定按钮时，循环判断没有填写条件名称的数据，第一个不满足条件的显示输入框，且只弹出一次警告。3. 使用some方法return true跳出循环，数组里面所有的元素有一个符合条件就返回true；和map中使用break和continue不仅不能调出整个循环 ，还会报错，使用return也不行。二、分析：在vue项目中，循环多数习惯会用forEach、map等方法去遍历数组，但是大家会发现在。2. 使用try-catch-finally处理forEach的循环；
2022-11-02 11:14:48
4910
原创 js两个数组对应整合成table数据显示
场景：A数组的某个字段对应的value值，对应着B数组的某key值。要求获取B数组该key值所对应的value值组装成table的如下格式。
2022-10-12 13:59:29
562
原创 vant+vue在静态页面实现车牌号软键盘
1.因为是在html静态页面中使用，所以要先引入vant.css、vant.js、vue.js到需要使用的html页面；2.将实现好的车牌软键盘功能放到一个js里面，再将该组件使用js方式引入到html界面，同样该组件的css代码也要引入；2. 当在多个静态页面需要使用该组件时，如何封装成组件？1、如何将选中的车牌号回显在需要显示的表单中？
2022-09-29 14:30:48
3290
原创 TypeError: Cannot read properties of undefined (reading ‘getBoundingClientRect‘)
一、报错如下：TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')三、原因：主要可能是跟el有关 ，我这边代码逻辑没有问题，是在vant组件的tab切换时出现该报错。主要时因为 v-if 后找不到该结点，切换到其他没有tab的页面就会报错。二、解决：将判断的 v-if 改成 v-show 报错消失。
2022-09-28 14:02:42
9882
2
原创 vue配置多个服务端请求地址并实现scp2自动部署
通常情况下，一个项目会有开发环境、内网环境、测试环境、生产环境等多个环境，通过请求不同的服务器来获取数据，如果可不修改代码，通过执行不同命令就发布不同环境，我们的效率会得到很大提升。
2022-09-02 14:54:40
1472
原创 JS中新逻辑赋值运算符使用(?.、? ?、| |=、&&=)
值（虚值）：是在布尔值Boolean上下文中认定为 false 的值。逻辑空值运算符左到右操作，仅在x为nullish值（null或者undefined）时才将值分配x，x如果不是nullish值时压根就不会执行y了，更不存在赋值操作一说。）是根据nullish值来判断，而或运算符（||）是根据falsy 值来判断。：当左侧的操作数为nullish值（null或者undefined），返回其右侧操作数，否则返回左侧操作数。就是或运算符（||）与赋值运算符同时使用。三、逻辑或分配（||=）：x ||= y。.
2022-08-31 16:56:32
1271
原创 移动端如何使用 vConsole 调试
前言：移动端（如手机、iPad）无法打开控制台像pc端一样使用console.log，使用chrome的inspect 也蛮麻烦的，借助vConsole就会变得很方便。方法二：下载源码文件：下载找到dist/vconsole.min.js 这个文件放到项目的static静态资源下面，然后在main.js中import进来。使用：VConsole 只是 vConsole 的原型，而非一个已实例化的对象。方法三：使用 CDN 直接插入到 HTML。方法一：使用 npm（推荐）...
2022-08-31 14:21:48
2300
1
原创 JS判断是否为数组的方式
4. Array.isArray()：判断传递的值是否是一个数组，返回一个布尔值。是ES6新增的方法，所以低版本的浏览器可能不支持。因为构造函数的constructor属性在原型里，并且指向构造函数，所以可以使用constructor属性来判断一个实例对象。：检验构造函数的prototype属性是否出现在对象的原型链中，返回一个布尔值。可以获取到对象的不同类型。它除了可以检验是否为数组外，还可以检验是否是函数、对象、数字等；而来，也可以说判断它属于哪个类。...
2022-08-31 11:25:59
220
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人