vue+element-ui el-table组件二次封装实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题

在日常项目中，技术栈为element-ui，发现常见el-table需要用到虚拟列表，所以结合一下，输出一个虚拟列表 + El-table

前端开发中涉及表单的页面非常多，看似功能简单，开发快速，实则占去了很大一部分时间。当某个表单包含元素过多时还会导致html代码过多，vue文件过大。从而不容易查找、修改和维护。

在日常的管理系统开发中，我们会经常实现 form搜索+table展示的场景，通过elementUI一直搬运会非常烦躁，封装一个可以快速实现搜索的组件

布局很简单，就左边内容，右边导航。导航和内容本来可以用 v-for 来生成的，但是为了看起来更简单明了，我就没那么写。先来看看布局效果吧！ 这个时候我们看见的是最顶部的内容，这个文档流的 scrollTop 此时等于 0，让我们把视口往下移一点，也就是滚动一下窗口，查看下面的内…

使用vue2+Element UI封装表单组件，通过配置式表单兼容各类表单类型，实现代码复用、统一维护目的。

运营测试时，提出跨页全选的要求；实现真正的【感官】全选，真正的点击全选按钮即可勾选全部的数据的页面效果

--- theme: channing-cyan --- ## 效果 ![Animation.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpf

先看代码 这是Element Plus官网上面的一个带验证的表单示例 可以看到除了最外层的 <el-form>以外,有大量的重复el-form-item以及里面各类的表单组件,既然有重复那能不能通过循