- 博客(59)
- 收藏
- 关注
RSS订阅原创 Debug-037-table列表勾选回显方案
效果展示：图1图2最近实现一个支持勾选的el-table可以回显之前勾选项的功能。实现了一个“编辑”的功能： 在图1中的列表中有三行数据，当点击“更换设备”按钮时，打开抽屉显示el-table组件如图2所示，可以直接回显勾选上图1的上个对应的3行数据。 当我们重新勾选图2中的其他三行，做更新操作时，点击确认关闭弹窗，图1的列表数据会更新。再次打开抽屉，初始化会重新勾选3行新数据。思路：主要是利用了elementUI-plus中el-table组件的一个方法：toggleRowSe
2025-03-21 15:11:39
322
原创 Debug-036-el-form横向表单-字段对齐的处理（2）
这次这个问题同样是我在使用el-form时使用的是“行内表单”，但是当某一个输入框的类型为type="textarea"时，人为手动去调整其高度时，这一行的其他输入框或者说是el-form-item位置会变化。这个思路是受到之前的那篇文章的影响，但是由于之前的图片是高度固定的，所以还是好实现的，但是这里高度不固定，所以我自然而然想到了监听的方法。我发现左侧的元素虽然会随着textarea的高度变化，但是始终它都在居中的位置。监听textarea的高度变化，动态的去调整左侧输入框的高速，使二者保持一致。
2025-03-21 14:27:03
422
原创 Debug-034-elementUI中Message消息多次触发只提示一次
只要是用过elementUI的各位，肯定知道其中的“Message 消息提示”组件。一般执行完特定操作或者前端根据接口返回信息报出一个全局提示的作用。
2024-12-05 15:54:41
707
原创 Debug-035-el-form横向表单-字段对齐的处理
这是一个我们业务中的横向表单，用于展示设备的某些属性字段。功能也很容易实现，问题是最后一行的左右两个表单元素不能对齐（"照片字段"和”参数字段“），这个就是会有一点强迫症。原因很简单，是”照片“的高度将el-form-item撑起来了，这里照片给的是宽高各120px。然后现象就是”参数“字段垂直方向是居中对其的，但我希望让这一行的两个表头字段是对齐的。给最后一项el-form-item的样式上添加margin-top,调整它的上边距。至此，使用方案3以后如果再追加新的展示字段，也不会有问题。
2024-12-05 15:51:34
283
原创 Debug-033-input输入框的浏览器默认填充密码的行为（未解决）
一般来讲不会超过三个，我看阿里云的设置密码就想到这个问题了，我没有别人的号，所以不会被记录到，而我们这里使用的是测试账号，记录过很多同事的账号，所以积累的比较多，其实只要用户一旦输入一个值之后，浏览器的填充就会消失了，没太大影响。想讨论的是如图二所示的问题：浏览器默认填充密码的行为。上面两个截图是MDN给出的解释，比较客观的表达了，确实不一定生效，有浏览器版本因素和不同浏览器的兼容因素。这里首先就给大家排出掉网上的一些很奇怪的“偏门方法”，我仔细想了一下，得不偿失，而且很多都是错的，完全没用。
2024-11-25 13:35:40
599
原创 Debug-032-前端F12-查看伪元素的一个小技巧
举个例子：这张图是elementUI中的一个button按钮，我想知道它在鼠标悬浮的时候是什么样式该？从哪里找到？
2024-11-21 14:22:08
381
原创 Debug-031-近期功能实现小结
这个还是挺有意思的，前端的html和css是有简写方式的，我在vscode中实际测试了一下，如果熟练了之后确实很方便，还挺酷的。以前也这么写过，但是没有意识去特意留意这一块。理解之后，在之后的开发中可以留意着去按这种方式去写一下标签和样式。Emmet语法总结-优快云博客Emmet 总结(这真是一个省事的好工具)_emmet工具-优快云博客前端开发必备！Emmet使用手册 - 前端开发者学堂 (fedev.cn) - 前端开发社区。
2024-11-21 13:54:11
886
原创 git-代码管理-经验分享
而对于你真正需要用到它的时候，你再好好借助那个时候特定场景去反复练习一下就会特别加深你的印象，不过这里提醒一下哈，最后先切换一下分支，新建一条测试分支，你想怎么搞都没事儿，为了以防万一，千万别在你的开发分支上乱测试（别问我是怎么知道的，在本人不熟练的时候以前是有过惨痛教训的）。那么回到git上面来，我是这么做的，对于一些前置工作可以先做起来，对于有难度的可以先行调研，一旦完成小的功能点或者你尝试使用多种方式去实现某一个功能的时候，就可以使用git stash指令将它们分别保存成不同的id。
2024-10-22 17:25:48
1090
原创 组件封装-双el-select联动搜索-实现方案&经验分享
（1）product-device-select组件-”产品+设备“ 的概念因为我们是做物联网（IoT）平台的相关业务，所以，对这个概念比较熟悉了。就是我登录自己的账号，其中有我公司创建的10个产品，其中不同的产品下有不同数量的设备。如果你不太明白的话，再举个例子：把产品比喻成名著，我有四个产品分别是：西游记、水浒传、三国演义、红楼梦；那么设备就比喻成其中的人物。西游记中可以有孙悟空、猪八戒等；三国演义中有刘备、曹操等等。水浒传里有武松、林冲等等。
2024-10-22 16:25:24
1143
2
原创 git-合并连续两次提交（一个功能，备注相同）
场景是这样，由于我是实现一个功能，先进行了一次commit,然后我发现写的有些小问题，优化了一下功能并且把代码优化了一次，于是又提交了一次。两次的提交都是以相同的备注（当然这个无所谓），我想把两次提交合并成为一次提交，精简我的git记录。这里利用的是git reset指令回退版本利用--soft保留之前的提交到暂存区的技巧。还有其他方式以后分享。
2024-10-16 18:12:06
836
原创 Debug-029-el-table实现自动滚动&分批请求数据
最近做了一个小优化，还是关于展示大屏方面的。大屏中使用el-table展示列表数据，最初的方案是将数据全部返回，确实随着数据变多有性能问题，有时请求时间比较长。这里做的优化就是实现列表的滚动到距离底部一定高度时再次请求接口数据，实现分批请求提升性能。然后这里也实现让el-table自动滚动的功能。
2024-10-16 15:22:52
1510
1
原创 Debug-028-el-carousel走马灯-当展示图片为2的问题处理
在项目中有些数据需要轮播展示时，使用Carousel组件非常合适，可以在页面内挂载很多内容节点，平常组件的循环显示方向默认是往右边滑动，但是在循环数量为2时，循环显示方向就会呈现一左一右，对于部分强迫症客户来说体验感就不是很好，如下图。首先获取要循环的数据的长度length，如果为2时，复制一次，使其成为长度length为4的数组，然后将Carousel组件的indicators(下标显示器)多复制的给隐藏（原本长度为2，现在为4，就隐藏第3个和第4个)完整代码如下，可直接复制使用。
2024-10-15 15:00:50
1107
原创 Debug-027-el-tooltip组件的使用及注意事项
使用el-tooltip配合（3）（4）两个属性在el-tree中可以实现当某一层级字数过多，对名称有一个缩写，并且悬浮显示全部名称的效果，这里还配合使用了动态样式使用getWidth()方法。（5）Popover 和Tooltip 是有相似的属性的，你可以尝试把Popover的属性用在Tooltip上，说不定可以成功。这里我想说的是，当我们的表格中的某一列单元格的内容超级多的时候，肯定是需要设置show-overflow-tooltip实现鼠标悬浮显示全部信息的。这个组件使用起来也挺简单的，
2024-09-05 18:10:23
1547
原创 Debug-026-垂直水平居中实现方式（1）
* 图片向右平移自身的50%,向下80px平移自身的50%*/如果设置的x位移，那么参考的是自身的宽度；位移，那么参考的是自身的高度。/* 在 X 轴上倾斜 30 度，在 Y 轴上倾斜 -15 度 */（1）transform: translate(-100px, 80px);/* 将方块在 X 轴上缩放 2 倍，Y 轴上缩放 3 倍 */平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）补充：transform这个属性还是很强大的，可以支持元素的平移、旋转，放缩。
2024-09-03 11:47:37
345
原创 Debug-025-el-upload照片上传-编辑页回显照片并且支持再上传的实现方案（下）
这里只是要稍微调整一下代码，和新增有一点点区别，要控制好数据（变量）的更新和销毁，并且考虑更新isHasImageUrl的状态（有一点比较确定的是只有初次进来编辑页，如果有照片才显示el-image，一旦在编辑过程中删除或者替换过照片，之后就是显示的就全部是el-upload了，你可以细品一下，这里不赘述）这个思路其实是比方案二想到的要早，并且我其实知道这个思路是必然能行的，但是我还是最后没有办法了之后再去选择实现它，原因很简单，就是麻烦呗，如果能让el-upload直接回显上传过的图片，或者说。
2024-09-03 09:11:13
1432
2
原创 Debug-023-Document.createElement()的使用
对象的一些常用方法，并且补充了一些说明和示例。事件监听器，当用户选择文件后，执行箭头函数。方法，模拟用户点击文件输入元素，从而唤起文件选择界面。函数进行进一步处理，同时在控制台打印相关信息。用途举例：用这个来实现手动唤起文件上传入口。，然后将其隐藏并添加到。属性中获取第一个文件（元素，并设置其类型为。
2024-08-23 16:36:59
341
原创 Debug-022-el-upload照片上传-整体实现回顾(上)
前情概要：最近业务里通过el-upload实现一个上传图片的功能，有一些小小的心得分享给各位。一方面是review一下，毕竟实现了很多细小的功能，还有这么多属性、方法（钩子）和碰到的问题，感觉小有成就。另一方面，这个上传图片的功能比较少用，但是确实多数系统都有可能去做的一项功能，时间一久，很多钩子和属性非常容易遗忘，所以这里备份可以便于将来二次利用，温习一下，很多地方又可以直接去CV，也算是为以后提升效率考虑吧（虽然现在把这些在回顾一遍写下来真的超级麻烦，但还是应该有一些匠心精神吧，共勉共勉）。
2024-08-23 15:21:55
1524
原创 Debug-021-el-table实现分页多选的效果（切换分页，仍可以保持前一页的选中效果）
具体就是我们展示table数据的时候，表格中的数据多数情况是分页展示，毕竟数据量太多，分页的确是有必要的。那么我们有业务需要给表格第一列添加selection选择的属性，以方便选择每一行的数据做一个批量的动作时，就会存在只能选择当前页码的数据，不能选择其它页面的选项，因为点击分页就重新调接口拿新的表格数据了，这的确是个问题。思路：（1）我第一个想到的常规思路是去拿el-table的实例，看上面是否有方法或者变量会存所有选择过的选项，当然，当然如果翻页，我就重复往这里去塞数据，不过这个思路很快被我打消了。
2024-08-19 13:51:33
637
原创 Debug-020-谷歌浏览器的网站收藏夹丢失问题的处理方案
最近使用vscode的全局搜索功能时，发现搜索不到文件中的关键词，明明这个文件中就存在全局搜索框输入的关键词，但就是搜不到。_vscode为什么不能全局搜索了。先说导致丢失的原因：公司电脑安装加密软件导致，浏览器用于存放网站链接的文件被加密乱码，导致全部丢失。之前分享过我的第一篇博文，其实就是关于这个加密导致，是关于vscode软件的，这里把链接分享给大家。
2024-07-31 18:10:03
1723
原创 Debug-019-git reflog的两种使用场景
中的一个文件，用来跟踪每个分支的本地提交。偶尔我们需要使用git reset 回退版本的时候，假如我们前一步没有使用git log查看提交，又如果我们关闭了git命令行，又如果我们之前也并没有推送远程分支留有备份的的话，这些都没有做的话，那我们是可以使用git reflog查看找到当前分支回退之前的版本，只要找到那个哈希值，那么使用git reset就可以回退到之前的版本（以前我认为git reset只能回退到以前的某个版本，实际上你只要有对应的版本号-哈希值，那么你可以任意穿梭）
2024-07-31 13:43:13
1099
原创 Debug-018-elementUI-el-tree中通过CSS隐藏任意一项的选择框checkbox
现在有一个需求描述一下：首先是这个el-tree是个有checkbox的树，每一子节点都可以被选择，用于去实现一些系统的权限方面的功能，现在有一个特殊要求是，隐藏掉某几个叶子节点的checkbox选择框，因为这几个是不需要传递id给后端的，如果显示checkbox，由于el-tree是父子级联的关系（业务中不允许做成父子不级联的，因为菜单很多，用户一个个去勾选叶子节点非常麻烦），所以，选了父级节点，子节点会全部被勾选，这个机制是不会变的。以上是从业务上讲的，不理解的话也没事，因为我说的不是很具体。
2024-07-23 18:12:36
885
原创 wkhtmltopdf 工具安装与使用
最近一个同事请叫我一个问题，他发现一片不错的博文，是在博客园的，但是不能下载这篇文章，我看了一下才发现，原来csdn也是不行的。懂前端的伙伴可以在网站的HTML中截取文章那部分内容，cv到本地的vscode或者HBuilder中，自己生成一个，然后在使用工具转成PDF即可。生成的pdf完美还原网站。再补充一下哈，其实用这个工具的场景还比较少，一般人CV就可以，如果真有这个需要的话，wkhtmltopdf 是个不错的选择。跟刚才一样，这里的方式是直接换成某网站的URL，可以直接将网站的文章下载成pdf文件。
2024-07-23 16:42:27
2032
原创 前端项目笔记&经验-001
（7）封装组件的能力，这里分享一点我自己的想法，根据个人经验，我想，前端组件可以简单分为公共的一般功能组件和实现业务的业务组件，一般功能组件是实现系统普遍存在的一般性功能，可以方便之后的相似功能业务的开发。业务组件就是和我们的需求业务有很强的关联，其中的数据，逻辑跟我们的业务强耦合，一般不能再放入其他页面中使用。我们前端在封装组件的时候确实需要也是一定要考虑的一件事情就是尽可能的不要把业务上的数据和逻辑放入到这种一般性功能的组件之中，这样会产生一些代码的耦合，我们的项目在逐渐健壮起来的时候，就很难再操作。
2024-07-11 14:45:40
401
原创 Debug-017-elementUI-el-cascader组件首次选择选项不触发表单的自定义校验
用的是饿了么的组件。今天维护一个表单校验的时候发现一件事情，就是在表单中使用了 el-cascader组件，希望根据接口返回数据去动态校验一下这里面的选项，符合逻辑就通过自定义的表单校验，不符合就在这一项的下面标红提示。加上之后，就可以在第一次选择el-cascader之后就会主动触发表单中rule里对应“group”的校验，也就解决了第一次不触发的问题，但是为什么第一次回不触发呢？补充一下：这里有一篇之前写过的区分elementUI中区分表单全部校验和单独字段校验的文章，细节在这里面，可以去看看。
2024-07-05 16:16:53
1218
原创 前端-vue工程化-Pinia的使用
我就是看了他们的文章，并且项目中确实用到了状态管理，所以顺便练习了一下，感觉他们写的已经很不错了，让我加深了印象和更好的理解了Pinia这个状态管理库。（其实我也不用再写了，看完这两篇文章，再去官网扫一眼，如果项目中真的需要，试用一下基本就可以成功。补充一句：项目中全局的状态管理并非是必要的，这一点官网说的也很客观，当我们业务有需要的时候，考虑的全局状态管理的确实有必要的时候，Pinia当然就是一个很不错的方式。我们项目中使用的状态管理工具其实就是Pinia，当然不是我推荐大家用的，这个有迹可循，因为。
2024-07-04 14:59:16
802
原创 Debug-016-bigNumber的部分使用方法与属性
其实int和float类型还好吧，但是double这个数太大，超级大，我之前希望可以将这个具体的数可以确定到具体的值，而不是“1.7976931348623157E+308”这种，精确到小数点后16位。个人觉得这个还是很好用的，因为它最巧妙的在于将一个非常大的数，利用数组，将其分割成为若干的小数，这样就很好控制每一个部分，然后再配合定义好的正负和指数，就可以将这个数表示出来。我需要做的工作就是在选择完不同的类型时，校验用户的数在对应的范围里。按照阿里这个最大的数据来校验即可。
2024-07-02 16:55:50
812
原创 Debug-015-找出两个列表中不重复的元素
这段代码主要实现了从一个列表中筛选出不在另一个集合中的元素。简而言之，这段代码的作用是找出两个列表中不重复的元素。的原话，是不是很强大。
2024-06-06 09:43:09
673
原创 Debug-014-nginx代理路径的一条规则
如果/dev和下面的proxy_pass路径最后都带‘/’,那么就是匹配到dev之后要删除dev,然后再带着后面的路径；如果/dev和下面的proxy_pass路径最后都不带‘/’,那么就是匹配到dev之后不会删除dev字段。如果proxy_pass 端口后有斜杠/，proxy_pass不拼接location的路径。如果proxy_pass 端口后无斜杠/，proxy_pass会拼接location的路径。
2024-06-02 21:34:08
501
1
原创 Debug-013-el-loading中显示倒计时时间
优化：前端除了根据后端返回的ending字段判断停止调用查询接口以外，还会给出一个30秒的兜底时间，也就是说30秒之后如果ending字段依旧是false，前端就认为查询超时，停止loading和调用接口，而且想把这个30秒的时间放在loading上，可以更好的告诉用户需要等待最长大概30秒左右。今天实现一个小小的优化，业务上是后端需要从设备上拿数据，所以前端需要不断调用一个查询接口，直到后端数据获取完毕，前后端根据一个ending字段为true判断停止调用查询接口。对，大概是这么个思路。
2024-05-29 19:15:59
913
原创 Debug-012-el-popover 使用 doClose() 关闭窗口不生效的处理方案
这个方法是可以替代v-model="visible"来控制显示隐藏的（显示用doShow()这个方法）只要还是因为是在列表中，内容比较多，感觉用不了这个动态绑定v-model='visible + scope.row.id' 这种写法，但我记得好像失败了，最终选择了用doClose()的方案。看了好几篇博文，基本用的都是一种方法，但是他们给出的原因都是表格懒加载导致，可是我也没加这个属性，所以不能说服我，还说VUE不能检测到ref的值变化 不能触发视图更新（这个感觉靠点谱，但是视频1为什么行呢？
2024-05-28 19:12:47
1527
2
原创 程序员-网站分享（只有干货）
在线,JSON,JSON 校验,格式化,xml转json 工具,在线工具,json视图,可视化,程序,服务器,域名注册,正则表达式,测试,在线json格式化工具,json 格式化,json格式化工具,json字符串格式化,json 在线查看器,json在线,json 在线验证,json tools online,在线文字对比工具。程序员宝盒（baoboxs.com）是一个专门为程序员量身定制的一站式导航站，让程序员的学习、工作、娱乐更加高效、便捷。程序员宝盒-专属程序员的一站式导航。
2024-05-23 23:34:09
2057
原创 Debug-011-ES6中的链判断运算符（?.）
--------------------------------------------------补充---------------------------------------------------上面明显是一个错误写法，因为有时候接口返回的数据data中是没有a的，data有可能是{} 或者null ,这个时候再这样取值肯定会报错。这样写其实就是判断data是否有值，如果有就继续判断data.a是否有值，如果没有就会使用“给个默认值”，有就继续往下找，以此类推。
2024-05-21 22:32:17
674
原创 VUE-watch和watchEffect的区别
监听对象中某一个属性变化（reactive)，强烈建议使用此方式监听reactive响应对象数据（无坑）监听单个基本数据类型(ref)，（ref定义的基本类型使用watch监听的时候不需要.value）这里只能拿到新的值（newVal），拿不到旧值，并且深度监视好像无效。监听对象中某几个属性是可以的（reactive)监听对象(reactive)，不建议使用。
2024-05-20 23:54:57
562
原创 Vue3-ref的用法总结
比如：项目中子组件是一个弹窗或者抽屉，通过defineExpose暴露出来可控制它的显示隐藏的变量a,那么父组件在使用这个抽屉或者弹窗的时候，是可以通过在这子个组件上绑定ref = “dialogRef”,然后就可以得到子组件的组件实例对象，上面就有defineExpose的属性，那父组件不是想怎么么用就怎么用了吗？有的时候配合defineExpose（vue3新增的一个api，将子组件的方法或者属性暴露出来，供父组件使用）这样父组件在使用子组件时，通过ref是可以拿到子组件暴露出来的变量和方法的。
2024-05-19 23:32:15
517
原创 Debug-010-git stash的用法及使用场景
它会保存当前工作进度，会把暂存区和工作区的改动保存到一个未完结变更的堆栈中；执行完这个命令后，在运行git status命令，就会发现当前是一个干净的工作区，没有任何改动。git stash save '备注'现在可以去test一下，敲一遍就明白区别了。
2024-05-18 23:38:05
1024
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人