m0_51400566的博客

原创 本地项目如何设置https——2024-04-19

问题：由于项目引用了html5-qrcode插件，但是该插件在本地移动端调试时只能使用https访问，所有原本的本地地址是http，就需要改成https以方便调试。安装证书-确定-当前用户-下一步-将所有证书都放入下列存储（P）-浏览-受信任的根证书颁发机构-确定。2）完成以上步骤后，项目根目录会生成4个文件，如下。4）在项目vue.config.js里添加如下代码。1）从项目文件下打开cmd逐步输入如下命令。3）打开项目文件夹双击ca.crt 文件。解决方法：使用本地https证书。

原创 html5-qrcode实现扫码功能——2024-04-19

项目需求H5项目需要实现扫描二维码或条形码功能，使用插件html5-qrcode可基本实现该需求。

原创 ProTable列设置默认不勾选已隐藏的列——2023-05-16

1）定义变量（对象的键名为需要隐藏的列，必须和columns中列的key相对应）需求：表格工具栏列设置中，被隐藏的列默认不勾选，并且可以手动控制其显示，如图。

原创 antd复杂穿梭框——2022-09-28

需求：根据原型图实现左边为树形，右边为表格的穿梭框。

原创 导出方法记录——2022-08-10

由于在做项目过程中，许多地方都会有“导出”功能。所以可以在utils文件夹中建立文件common.js，将导出的公用方法写进去，方便页面调用。（具体页面所传参数不同）

原创 React赋值后异步更新的问题解决——2022-07-19

问题复现：点击“编辑”后弹出弹框反显，此时圈出区域已经赋值了，但始终显示的是上一次的结果，就导致第一次打开弹框时为空。如果赋值没问题，那就是更新的问题，存在异步更新。

原创 富文本初体验之react-quill——2022-07-19

react-quill的基本使用步骤。

原创 把后台平铺数据生成树结构——2022-07-08

后台返回数据：先转换成数组格式，然后置入组件中。 但是无法渲染出来，对比树结构的数据，发现没有children,是简单的平铺数据。所以需要再加一个属性： treeDataSimpleMode，就可以把简单格式的数据直接渲染成树结构了。......

原创 解决每次打开Modal都会导致页面刷新的bug——2022-06-30

最近遇到了一个bug,在一个页面中，父组件UserManage嵌套子组件TableList，当点击【修改信息】或左侧Tree的添加按钮，会弹出Modal，而同时也会再次请求数据，导致TableList重复渲染。如图所示解决办法：把TableList组件抽离出去！(具体原因未知)思路：由于在UserManage中嵌套TableList会导致子组件引用父组件的state，造成重复渲染？...

转载 Furion接口代理——2022-06-29

接口代理

原创 antd之切换tab清空已勾选项——2022-06-29

bug：切换有效/无效用户tab时，已勾选的项目依然存在。如图 思路：通过toolBar里面的onChange事件，清空勾选项。如图虽能实现效果，勾选项已清空，但还有一些残余bug：顶部已选择条未清空，再次切回去仍然存在勾选。如图 后在ProComponents官网找到解决方式ProComponents - 页面级别的前端组件 - ProComponents一行代码搞定！...

原创 git提交报错处理——2022-06-29

问题：拉取代码解决冲突后提交不了，并报以下错误。 发现是合并代码的时候选择了both（自己的和同事的代码均保存）导致了其中一个const声明的变量重复声明，删之就好了。粗心大意！！！

原创 父组件调用子组件方法（刷新页面）——2022-06-28

需求：页面进行一些操作后（新增/编辑/修改状态等），需要刷新页面。但页面渲染的方法是定义在tableList组件内部的，操作按钮及一些弹框则是在父组件。就需要从父组件调用子组件请求页面刷新的方法，如图。 ...

原创 后台数据处理（字符串-数组）——2022-06-27

请求接口时返回数据直接用数组循环报错需要转换eval('('+res.data+')')

原创 antd之Select下拉框回显数据——2022-06-27

问题：点击【编辑】弹框后，回显数据时候有误。如图Select部分代码： 解决办法：由于JSX语法，修改为value={1}实现效果：

原创 React项目之编辑时表单数据回显——2022-06-23

React实战项目成长记

原创 ant-design-vue按需加载报警告——2022-04-21

在使用Formily Vue中配置了按需加载如图：npm run serve运行后报警告如图：（导致页面也无法显示）然后去ant-design-vue官网找答案，因为项目是Vue2,对应的ant-design-vue版本应降到1.x，如图npm install ant-design-vue@1.7.8再重启项目，运行正常。...

转载 css3字体缩放样式-webkit-text-size-adjust的用法详解——2022-03-31

1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}2、-webkit-text-size-adjust放在body上会导致页面缩放失效3、body会继承定义在html的样式4、用-webkit-text-size-adjust不要定义成可继承的或全局的原文链接：css3中-webkit-text-size-adjust详解 - ahuing - 博客园.

原创 函数防抖之搜索查询——2022-03-21

问题描述：在监听keyword进行搜索查询时，keyword每改变一次，就像后台请求一次数据。输入操作过快的情况，会造成渲染有误。解决方案：在监听变化时设置定时器，输入完成后的300ms再请求数据。这样就会只请求最后输入的数据，代码如下：...

原创 sortable.js实现拖拽排序——2022-03-18

html代码：js代码：反思：如果页面存在多个点击事件相互影响，一定要注意拖拽方法在何处调用。没事多console!!!参考文档：SortableJS

原创 获取dom元素粗心踩坑——2022-03-18

利用document.getElementById(''a")获取a元素失败，打印出来显示null，可是这个元素是存在的。找了半天是出在v-if上面，因为v-if是真正的条件渲染。使其功能不变，把v-if改成v-show就好了。复习知识点：v-if和v-show的异同共同点：v-if 和 v-show 都能实现元素的显示隐藏区别：1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；2. v-s

原创 SSH格式不正确解决方法——2022-03-02

错误提示：Key is invalid. You must supply a key in OpenSSH public key format翻译：密钥无效。必须提供OpenSSH公钥格式的密钥解决方法：1.生成公钥ssh-keygen -t rsa -C "GitHub账号的注册邮箱"2.复制公钥到GitHub设置SSH and GPG keys中的SSH keyscat ~/.ssh/id_rsa.pub...

原创 van-tabbar自定义图标——2022-03-01

原创 被绝对定位元素覆盖的元素点击事件——2022-02-18

问题描述：这是一个H5页面的tabbar，使用绝对定位在外层覆盖了一个圆角框。但是这会使得tabbar本身的点击跳转失效。解决办法：在圆角框样式里加上一行代码，使之鼠标事件穿透这个绝对定位层，从而能点击到被覆盖的tabbar，如下图...

原创 textarea禁止拉伸和border设置——2022-02-10

问题描述：以下是设置了宽高的textarea文本域标签，点击右下角可以拉伸，并且聚焦时有很粗的边框，给人视觉体验非常不好。优化方案：1)禁止拉伸.textarea{ resize:none}2)优化边框.textarea:focus{ outline: none !important; border: 1px solid rgb(0, 138, 211);}...

原创 el-checkbox隐藏label——2022-01-18

需求：如图，在文件夹下方添加勾选框，能实现多选。相当于是纯勾选框。无label尽管能达到展示效果，但是会导致出现勾选一个，全部都选上了的情况。在网上反复搜了很多方法，找到一个特别强大的方式，只需要添加一行代码。直接上图！...

原创 数组every()方法与逻辑判断的应用——2022-01-17

数组的every()方法，针对数组中的每一个元素进行比对，只要有一个元素比对结果为false则返回false，反之要所有的元素比对结果为true才为true项目实例：需求：如图1，点击“批量安排”按钮，需要控制： 1）勾选项培训类型相等（分为内部和外部） 2）勾选项培训形式相等（分为面授和自学） 图1反复试错之后终于找到合适的方法，...

原创 el-tab-pane踩坑——2022-01-14

bug描述：点击图1“查看无效培训”按钮，切换到无效培训页面。请求成功并返回了数据，但是页面显示空白，如图2 图1 图2说明：3个tab页是用v-if来控制显示隐藏，点击“查看无效培训”按钮触发切换事件，代码如下：错误思路：一直在...

原创 el-select删除选中传值问题——2022-01-14

需求：去掉勾选在已选中数组里面删除该对象。思路：利用数组遍历，与删除数据的id作对比，再结合Array.splice方法删除贴代码：

原创 文件局部刷新——2022-01-12

需求：在输入关键字点击搜索的时候，仅仅红色区域刷新。解决方案：在红色区域所属的父盒子div上添加v-loading="loading",loading设置为false。触发事件时loading=true，加载完成后loading=false。

原创 echarts饼状图文字重叠——2022-01-05

问题描述：当所需显示的条目内容过多时，会导致饼状图指示线或文字区域有所重叠，影响观感，如下图解决方法：设置最小扇区角度，minAngle代码如图：

转载 什么时候需要用的Vue.nextTick()？

1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.ne...

原创 el-table合并单元格的捆绑移动——2021-10-13

上下移动的代码：实现效果：圈出区域可上下移动

原创 el-table 复选框禁用——2021-09-27

规划

原创 JS数字格式化（加千分位）——2021-09-14

代码如下：实现效果：

原创 Vue+elementUI实现表格行上下移动——2021-09-14

哈哈啊哈

原创 el-date-picker日期禁用限制（具体日期）——2021-08-06

最终效果如下：

原创 el-date-picker日期禁用限制——2021-07-29

html代码：js代码：实现效果：合同签署日期禁选今天之后的日期，合同结束时间禁选今天及之前的日期。

原创 css虚线间隔——2021-07-26

第一种最简单的实现虚线效果，无间隔。效果如下第二种若想加大虚线中间的间隔，可以使用如下代码，效果如下。注：background-size的数值大小可以改变虚线间隔的大小。

原创 el-card绑定事件失效问题解决——2021-07-23