- 博客(11)
- 收藏
- 关注
RSS订阅原创 当图片太大或太多导致动画卡顿时，如何用预加载方法解决卡顿问题
预加载的思路主要是预先告知浏览器某些资源可能在将来会被使用到，从而提前将这些资源加载到本地缓存中。这样，在后续需要用到这些资源时，就可以直接从缓存中快速获取，减少等待时间，提升用户体验。当图片太多或者太大时，点击左右切换会显得异常卡顿，所以想到了使用预加载的方式去解决卡顿的问题。在需要用到的页面文件直接引用即可。
2024-05-24 14:48:24
273
1
原创 react 基于antd的TreeSelect组件实现自定义功能（包含增、删、改、查）的代码逻辑
新增的逻辑同select里的扩展菜单一样，查的功能也不需要自己写，组件库里的查询属性可以复用，就是改和查需要自己写一下逻辑。因为antd的treeselect在官方组件库里没有CURD功能，所以需要自定义去实现这些功能。
2024-03-12 10:14:24
1086
1
原创 前端nginx如何配置ws(websocket)代理服务？
最近有个需求是WebSocket代理配置，ws配置跟http配置不太一样，所以记录一下需要配置的nginx和使用方法。发起websocket请求的路径这里的拦截标识是必要的，没有拦截标识，前端就不会去请求正确的地址。后台实际访问的地址是 ws://ip:port/umc/ws/connect/...所以在代理和nginx配置的时候都要把拦截标识截掉，发出正确的请求给后台才能连通。
2024-03-07 16:09:05
2306
1
原创 折叠面板里面查询菜单树时如何做到数据不污染
遇到一个需求就是通过点击每一个折叠面板查询当前panel title的tree数据，问题就是我点击下一个panel的时候查到的数据会覆盖我上一次查询出来的数据，因此数据污染了，那就要处理一下数据。数据处理之前，我先得把我调接口拿到的数据先进行处理一下，给每次查出来的数据一个初始状态(isSelected) false，我展开就为true，关闭就为false。
2024-01-03 14:49:23
363
1
原创 react antd table组件的删除和移动排序实现逻辑
判断表格内的Input输入框是否变化，变化的话type就要变成update。自定义实现排序按钮和删除按钮，当点了save按钮才是真正的保存成功。先来看一下dataSource大致有哪些数据。新增一条数据需要造一条空的数据。移动按钮（上，下）的实现逻辑。上面用到的一些方法是封装过的。table组件处的代码。脚本编辑框的一些代码。
2023-10-10 16:11:55
415
1
原创 react 复杂数据的转换，把一堆从form表单获取的values一维数组的数据转换成树形结构的数据
这些数据是从form表单的values获取的，通过数字下标可以区分有几组数据，并且区分一组数据里面又有几组二级数据。至此，数据就处理好了，传给后端就可以正常调接口了。
2023-04-14 15:18:33
224
原创 React antd 折叠面板里面包含表单的增减，折叠面板也有增减功能，以及记录这一块的传参和回显逻辑
一进这个抽屉页面就默认打开第一个折叠面板，点击Add按钮可以新增一个折叠面板，点击Delete按钮可以删除该折叠面板。一个折叠面板里面包含两个下拉框，这两个下拉框的数量是固定的，不固定的是有操作那一块的表单数量，这里表单通过点击操作里面的加号和减号可对应的进行增减。至此，结构的大致样式就完成了，至于传参和回显的逻辑涉及项目机密，就不公开了.......
2023-04-14 13:54:10
1118
1
原创 React antd 表格组件自定义渲染勾选框和全选功能
有两列数据要渲染出勾选框，并且右上角有一个全选按钮，其有三种状态，全选，半选，和空状态。
2023-04-13 17:23:15
1697
1
原创 React antd Table组件动态合并单元格(合并行)代码实现
接下来就要计算要合并多少行，第一列的数据是可以确定是唯一的，所以直接计算该字段的值有多少次重复的次数，有几次重复就要合并多少行，第二列的数据不能确定是唯一的，所以要对第二列数据进行转换一下，可以拼接一下第一列和第二列的数据就可以确定是唯一，然后同理，计算重复的次数，累计起来进行合并行。分成三级表格，第一列和最后一列是一级合并，第二列和第五列是二级合并， 第三列和第四列不需要合并。先把树形数据扁平化，然后把扁平化之后的数据进行渲染表格。至此就可以是实现动态合并行了。
2023-04-13 16:35:21
1785
原创 React antd 树组件自定义父子节点交互逻辑（包括全选，半选，全不选三种状态）使用checkStrictly使父子节点状态不再受控
先使用checkStrictly使父子节点状态不再受控，checkedKeys属性有两个参数可以用来控制全选和半选状态（checked是所有勾选中的id，halfChecked是半选的id），通过setCheckedKeys来控制状态即可。4. 子节点全部勾选，子节点最近一级的父节点是全选状态（再上一级根据旗下的子节点是否全选进行判断，以此类推...）；5. 子节点全部取消勾选，父节点不取消，呈半选状态。2. 父节点选中为勾选状态，子节点全部勾选；1. 父节点选中为半选状态，子节点不选中；
2023-04-13 11:27:03
3374
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人