LM0916的博客

禁用type="datetimerange"类型的内侧输入框输入

debug:日期范围搜索框类型切换出现的显示问题。

效果展示：图1图2最近实现一个支持勾选的el-table可以回显之前勾选项的功能。实现了一个“编辑”的功能： 在图1中的列表中有三行数据，当点击“更换设备”按钮时，打开抽屉显示el-table组件如图2所示，可以直接回显勾选上图1的上个对应的3行数据。 当我们重新勾选图2中的其他三行，做更新操作时，点击确认关闭弹窗，图1的列表数据会更新。再次打开抽屉，初始化会重新勾选3行新数据。思路：主要是利用了elementUI-plus中el-table组件的一个方法：toggleRowSe

这次这个问题同样是我在使用el-form时使用的是“行内表单”，但是当某一个输入框的类型为type="textarea"时，人为手动去调整其高度时，这一行的其他输入框或者说是el-form-item位置会变化。这个思路是受到之前的那篇文章的影响，但是由于之前的图片是高度固定的，所以还是好实现的，但是这里高度不固定，所以我自然而然想到了监听的方法。我发现左侧的元素虽然会随着textarea的高度变化，但是始终它都在居中的位置。监听textarea的高度变化，动态的去调整左侧输入框的高速，使二者保持一致。

这是一个我们业务中的横向表单，用于展示设备的某些属性字段。功能也很容易实现，问题是最后一行的左右两个表单元素不能对齐（"照片字段"和”参数字段“），这个就是会有一点强迫症。原因很简单，是”照片“的高度将el-form-item撑起来了，这里照片给的是宽高各120px。然后现象就是”参数“字段垂直方向是居中对其的，但我希望让这一行的两个表头字段是对齐的。给最后一项el-form-item的样式上添加margin-top,调整它的上边距。至此，使用方案3以后如果再追加新的展示字段，也不会有问题。

一般来讲不会超过三个，我看阿里云的设置密码就想到这个问题了，我没有别人的号，所以不会被记录到，而我们这里使用的是测试账号，记录过很多同事的账号，所以积累的比较多，其实只要用户一旦输入一个值之后，浏览器的填充就会消失了，没太大影响。想讨论的是如图二所示的问题：浏览器默认填充密码的行为。上面两个截图是MDN给出的解释，比较客观的表达了，确实不一定生效，有浏览器版本因素和不同浏览器的兼容因素。这里首先就给大家排出掉网上的一些很奇怪的“偏门方法”，我仔细想了一下，得不偿失，而且很多都是错的，完全没用。

只要是用过elementUI的各位，肯定知道其中的“Message 消息提示”组件。一般执行完特定操作或者前端根据接口返回信息报出一个全局提示的作用。

举个例子：这张图是elementUI中的一个button按钮，我想知道它在鼠标悬浮的时候是什么样式该？从哪里找到？

这个还是挺有意思的，前端的html和css是有简写方式的，我在vscode中实际测试了一下，如果熟练了之后确实很方便，还挺酷的。以前也这么写过，但是没有意识去特意留意这一块。理解之后，在之后的开发中可以留意着去按这种方式去写一下标签和样式。Emmet语法总结-优快云博客Emmet 总结(这真是一个省事的好工具)_emmet工具-优快云博客前端开发必备！Emmet使用手册 - 前端开发者学堂 (fedev.cn) - 前端开发社区。

F12调试

最近做了一个小优化，还是关于展示大屏方面的。大屏中使用el-table展示列表数据，最初的方案是将数据全部返回，确实随着数据变多有性能问题，有时请求时间比较长。这里做的优化就是实现列表的滚动到距离底部一定高度时再次请求接口数据，实现分批请求提升性能。然后这里也实现让el-table自动滚动的功能。

在项目中有些数据需要轮播展示时，使用Carousel组件非常合适，可以在页面内挂载很多内容节点，平常组件的循环显示方向默认是往右边滑动，但是在循环数量为2时，循环显示方向就会呈现一左一右，对于部分强迫症客户来说体验感就不是很好，如下图。首先获取要循环的数据的长度length，如果为2时，复制一次，使其成为长度length为4的数组，然后将Carousel组件的indicators(下标显示器)多复制的给隐藏（原本长度为2，现在为4，就隐藏第3个和第4个)完整代码如下，可直接复制使用。

使用el-tooltip配合（3）（4）两个属性在el-tree中可以实现当某一层级字数过多，对名称有一个缩写，并且悬浮显示全部名称的效果，这里还配合使用了动态样式使用getWidth()方法。（5）Popover 和Tooltip 是有相似的属性的，你可以尝试把Popover的属性用在Tooltip上，说不定可以成功。这里我想说的是，当我们的表格中的某一列单元格的内容超级多的时候，肯定是需要设置show-overflow-tooltip实现鼠标悬浮显示全部信息的。这个组件使用起来也挺简单的，

* 图片向右平移自身的50%,向下80px平移自身的50%*/如果设置的x位移，那么参考的是自身的宽度；位移，那么参考的是自身的高度。/* 在 X 轴上倾斜 30 度，在 Y 轴上倾斜 -15 度 */（1）transform: translate(-100px, 80px);/* 将方块在 X 轴上缩放 2 倍，Y 轴上缩放 3 倍 */平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）补充：transform这个属性还是很强大的，可以支持元素的平移、旋转，放缩。

这里只是要稍微调整一下代码，和新增有一点点区别，要控制好数据（变量）的更新和销毁，并且考虑更新isHasImageUrl的状态（有一点比较确定的是只有初次进来编辑页，如果有照片才显示el-image，一旦在编辑过程中删除或者替换过照片，之后就是显示的就全部是el-upload了，你可以细品一下，这里不赘述）这个思路其实是比方案二想到的要早，并且我其实知道这个思路是必然能行的，但是我还是最后没有办法了之后再去选择实现它，原因很简单，就是麻烦呗，如果能让el-upload直接回显上传过的图片，或者说。

在此记录，方便以后使用。

对象的一些常用方法，并且补充了一些说明和示例。事件监听器，当用户选择文件后，执行箭头函数。方法，模拟用户点击文件输入元素，从而唤起文件选择界面。函数进行进一步处理，同时在控制台打印相关信息。用途举例：用这个来实现手动唤起文件上传入口。，然后将其隐藏并添加到。属性中获取第一个文件（元素，并设置其类型为。

前情概要：最近业务里通过el-upload实现一个上传图片的功能，有一些小小的心得分享给各位。一方面是review一下，毕竟实现了很多细小的功能，还有这么多属性、方法（钩子）和碰到的问题，感觉小有成就。另一方面，这个上传图片的功能比较少用，但是确实多数系统都有可能去做的一项功能，时间一久，很多钩子和属性非常容易遗忘，所以这里备份可以便于将来二次利用，温习一下，很多地方又可以直接去CV，也算是为以后提升效率考虑吧（虽然现在把这些在回顾一遍写下来真的超级麻烦，但还是应该有一些匠心精神吧，共勉共勉）。

具体就是我们展示table数据的时候，表格中的数据多数情况是分页展示，毕竟数据量太多，分页的确是有必要的。那么我们有业务需要给表格第一列添加selection选择的属性，以方便选择每一行的数据做一个批量的动作时，就会存在只能选择当前页码的数据，不能选择其它页面的选项，因为点击分页就重新调接口拿新的表格数据了，这的确是个问题。思路：（1）我第一个想到的常规思路是去拿el-table的实例，看上面是否有方法或者变量会存所有选择过的选项，当然，当然如果翻页，我就重复往这里去塞数据，不过这个思路很快被我打消了。

最近使用vscode的全局搜索功能时，发现搜索不到文件中的关键词，明明这个文件中就存在全局搜索框输入的关键词，但就是搜不到。_vscode为什么不能全局搜索了。先说导致丢失的原因：公司电脑安装加密软件导致，浏览器用于存放网站链接的文件被加密乱码，导致全部丢失。之前分享过我的第一篇博文，其实就是关于这个加密导致，是关于vscode软件的，这里把链接分享给大家。

中的一个文件，用来跟踪每个分支的本地提交。偶尔我们需要使用git reset 回退版本的时候，假如我们前一步没有使用git log查看提交，又如果我们关闭了git命令行，又如果我们之前也并没有推送远程分支留有备份的的话，这些都没有做的话，那我们是可以使用git reflog查看找到当前分支回退之前的版本，只要找到那个哈希值，那么使用git reset就可以回退到之前的版本（以前我认为git reset只能回退到以前的某个版本，实际上你只要有对应的版本号-哈希值，那么你可以任意穿梭）

现在有一个需求描述一下：首先是这个el-tree是个有checkbox的树，每一子节点都可以被选择，用于去实现一些系统的权限方面的功能，现在有一个特殊要求是，隐藏掉某几个叶子节点的checkbox选择框，因为这几个是不需要传递id给后端的，如果显示checkbox，由于el-tree是父子级联的关系（业务中不允许做成父子不级联的，因为菜单很多，用户一个个去勾选叶子节点非常麻烦），所以，选了父级节点，子节点会全部被勾选，这个机制是不会变的。以上是从业务上讲的，不理解的话也没事，因为我说的不是很具体。

用的是饿了么的组件。今天维护一个表单校验的时候发现一件事情，就是在表单中使用了 el-cascader组件，希望根据接口返回数据去动态校验一下这里面的选项，符合逻辑就通过自定义的表单校验，不符合就在这一项的下面标红提示。加上之后，就可以在第一次选择el-cascader之后就会主动触发表单中rule里对应“group”的校验，也就解决了第一次不触发的问题，但是为什么第一次回不触发呢？补充一下：这里有一篇之前写过的区分elementUI中区分表单全部校验和单独字段校验的文章，细节在这里面，可以去看看。

其实int和float类型还好吧，但是double这个数太大，超级大，我之前希望可以将这个具体的数可以确定到具体的值，而不是“1.7976931348623157E+308”这种，精确到小数点后16位。个人觉得这个还是很好用的，因为它最巧妙的在于将一个非常大的数，利用数组，将其分割成为若干的小数，这样就很好控制每一个部分，然后再配合定义好的正负和指数，就可以将这个数表示出来。我需要做的工作就是在选择完不同的类型时，校验用户的数在对应的范围里。按照阿里这个最大的数据来校验即可。

这段代码主要实现了从一个列表中筛选出不在另一个集合中的元素。简而言之，这段代码的作用是找出两个列表中不重复的元素。的原话，是不是很强大。

如果/dev和下面的proxy_pass路径最后都带‘/’,那么就是匹配到dev之后要删除dev,然后再带着后面的路径；如果/dev和下面的proxy_pass路径最后都不带‘/’,那么就是匹配到dev之后不会删除dev字段。如果proxy_pass 端口后有斜杠/，proxy_pass不拼接location的路径。如果proxy_pass 端口后无斜杠/，proxy_pass会拼接location的路径。

优化：前端除了根据后端返回的ending字段判断停止调用查询接口以外，还会给出一个30秒的兜底时间，也就是说30秒之后如果ending字段依旧是false，前端就认为查询超时，停止loading和调用接口，而且想把这个30秒的时间放在loading上，可以更好的告诉用户需要等待最长大概30秒左右。今天实现一个小小的优化，业务上是后端需要从设备上拿数据，所以前端需要不断调用一个查询接口，直到后端数据获取完毕，前后端根据一个ending字段为true判断停止调用查询接口。对，大概是这么个思路。

这个方法是可以替代v-model="visible"来控制显示隐藏的（显示用doShow()这个方法）只要还是因为是在列表中，内容比较多，感觉用不了这个动态绑定v-model='visible + scope.row.id' 这种写法，但我记得好像失败了，最终选择了用doClose()的方案。看了好几篇博文，基本用的都是一种方法，但是他们给出的原因都是表格懒加载导致，可是我也没加这个属性，所以不能说服我，还说VUE不能检测到ref的值变化 不能触发视图更新（这个感觉靠点谱，但是视频1为什么行呢？

--------------------------------------------------补充---------------------------------------------------上面明显是一个错误写法，因为有时候接口返回的数据data中是没有a的，data有可能是{} 或者null ,这个时候再这样取值肯定会报错。这样写其实就是判断data是否有值，如果有就继续判断data.a是否有值，如果没有就会使用“给个默认值”，有就继续往下找，以此类推。

它会保存当前工作进度，会把暂存区和工作区的改动保存到一个未完结变更的堆栈中；执行完这个命令后，在运行git status命令，就会发现当前是一个干净的工作区，没有任何改动。git stash save '备注'现在可以去test一下，敲一遍就明白区别了。

git clone + 地址 -b +远程仓库的任意分支 +本地文件夹的名字（自己想命名什么就命名什么）学到这个新指令可以快速拉去代码，关键是可以拉去指定分支，而且可以直接命名文件夹名字。

最近做了好几个有el-tree的页面，坑是真的多。不过对其中的方法和属性更熟悉了。光一个el-tree我写是篇博文估计都不够，方法属性贼多。今天实现了一个小功能，分享一下。主要是利用了CSS的显示隐藏，没什么讲的。至于el-tree的那些属性，我准备单独再来分享一次。本来以为要自己写的，结果人家已经封装好了，所以还是要对文档熟悉，el-tree叶子节点添加图标按钮。

有的时候在使用npm i 命令时，会出现卡顿现象，并且一直没有动静。（2）设置镜像（这一步可以提高安装速度）（3）最好看一下镜像配置成功没有。（4）最后在尝试 npm i。强制清理缓存（这一步比较关键）直接使用cnpm i 安装。

console.log("tableRef", this.$refs.tableRef) //vue2的写法。因为表头字段比较多吧，所以做一个dialog去展示，确定之后就展示对应勾选的表头。以后还是要提前多熟悉这些方法和属性，坑真的是都要踩一遍啊，一个也少不了。表格高度变小之后，我的十几行数据展示不全。并且vue2和vue3其实都有这个方法。

这里一共有两个问题：（1）如何生效（2）项目中还有别的组件和页面使用el-tree,这样修改之后，肯定会影响其他地方的使用，怎么处理？这里是通过改样式的方法，在网上参考别的大佬的代码，但其实我还没有深刻理解这段代码的含义，这里肯定要留意一下，再出一期。补充一下这一段知识点的空白，请各位大佬见谅。这里应该涉及到Vue中的深度选择器的相关知识（下面的代码是el-tree的基本结构和一些属性方法（请看备注，这里不再赘述，也可以去。这里我本来的思路其实是参考网上给出的另一种方式，即改源码的方式。

这个不是一般的那种三个字段同时提交表单，这个是每次点击后面的write按钮的时候开始校验。当然要注意：在页面结构中要配置好相应的rules，然后这里只对“token”进行校验。这样是完全可以拆开，就是写起来写三个不同的:rules="rules"，太麻烦。以前一直用的都是validate这个，这样就是对整个表单进行校验的方法。今天碰到一个问题，是关于表单校验的问题。用的是饿了么的组件。还是挺方便的，所以要注意这两个的区别。

el-tree在项目中应用还比较多，涉及权限，建筑层级等等业务的问题可能都要用到，坑也比较多。今天把碰到的需要和使用过的一小部分内容分享一下。Vue2，3会有一点差异，但不大，具体问题具体分析吧。第一个其实就是业务数据，其实是这棵树（:data=“data”）中的某层级下的一个节点的数据（你点击的哪一个就是哪一个），data其实也是后端返回的嘛，调接口拿的，格式还是要符合el-tree的基本要求。其实有三个哈，第三个我参与的业务用的比较少吧。expanded（也有用，业务里碰到过，后期再补充）

（1）这里现将页面中每一个标签中插入两个,第一个放标题部分（或者说是以冒号结尾的部分），第二个放内容。（2）利用display: inline-block;/*使元素成为行内块元素*/具体来说就是这四个li以冒号垂直方向对齐，并且后面的内容改变颜色。一个很简单的问题：如何将1转换成2的形式。注：（1）利用伪元素。

最近使用vscode的全局搜索功能时，发现搜索不到文件中的关键词，明明这个文件中就存在全局搜索框输入的关键词，但就是搜不到。一般公司是可以解密文件的，这个要根据不同公司的加密软件而定。解密以后，果然可以搜索到那个文件中的关键字。1.VScode 搜索存在问题的可能性排查。排查原因：原来是公司把文件加密导致的结果。