juenanfeng

背景 用户反馈列表横向太长，横向滚动的体验不好，无法快速定位到想要的列 实现 效果图 核心思路 找到 antd table 的滚动容器，利用 colgroup 下 td 计算出对应列的宽度并做响应式监

利用行懒加载的思路 实现 antd4 table 的虚拟滚动 拦截 TableComponents.tbody.row，返回被 IntersectionObserver 劫持的 tr 元素

由于项目表格的列数很多，所以table必然会出现横向滚动条。然而如果页面本身内容较多，出现纵向的滚动条，就会出现需要先滚动到表格底部（table的横向滚动条默认在容器底部），才能进行左右的拉动，这给部分用户带来了不便。 由于列表页一般下方没有其他内容，所以可以通过动态设置tab…

最近一直在做Electron的项目,随着项目的上线,在此做一点总结。本文主要记录一些坑点，整个Electron的搭建流程有很多文章说的非常好了，就不赘述了。 这里提到了两种通信方式。前者需要通过事件注册发布的方式实现数据传递，后者屏蔽了通信的细节，可以像调用普通对象一样共享数据…

最近重构项目的设计里大量用到需要多行输入的组件（支持复制粘贴）。例如输入需要排除的IP列表，需要排除的关键词列表等。在原先的实现里直接采用了textarea，但是这次产品提出了要在每行前面自动带上序号的要求。 不用textarea，使用多个input框来模拟。在每次按下ente…

最近几个项目都有流程式的表单输入。产品提出，在上一步的表单提交完毕之后，不能够修改但是依然要展示给用户（用户在填写下一步的表单时可能需要参照上一步表单中的内容）。 最初因为项目工期紧张，直接采用了对表单容器添加pointer-events: none;的作法。这样导致了很多问题…

最近项目上线之后，产品对首页的列表提出了列宽自适应内容的需求，即列的宽度由当前列中内容最宽的一个单元格决定（单元格内容不换行）。项目中的表格使用的是element-ui的table组件，非常强大，满足了各种各样的需求，例如固定列，固定表头，展开行等等。但是面对这样的需求，貌似并…

最近项目涉及到一个支持批量操作的小需求，交互上需要使用框选来触发。在查阅了一些资料后发现，网上的方案基本都是基于绝对定位布局的，此方案如果是针对全局（在body上）的框选，还是可用的。但是现实需求里几乎都是针对某个区域的框选。如果用绝对定位实现就比较繁琐了，需要调整定位原点。下…