虚拟滚动的本质并不复杂，根据滚动位置和展示范围进行部分数据截取、渲染，本质上和分页原理相似，只是截取范围的开始和结束节点是动态而已。
但表格虚拟滚动的相关细节处理比较麻烦，比如未设置宽度的列如何计算、新渲染的checkbox确定选中状态等等。
所以，推荐几个可以支撑前端展示10W+数据量的表格组件，减少重复造轮子。废话少说，上干货。
React：
Ant Design 官网地址 :
此组件库早已是react开发者必备的组件库，无须赘述，内部表格自带虚拟滚动。
TDesign 官网地址 :
腾讯出品的前端组件库，此前个人使用不多，但内部的表格组件同样包含虚拟滚动功能。
Material-UI 官网地址 :
来源于国外的一款开源UI组件库，原本主要用于用于构建基于谷歌 Material Design 规范的用户界面，内部的表格组件同样支持虚拟滚动。
VUE 2.x：
vxe-table 官网地址
这是一个专精表格的组件库，也是个人非常推荐在vue2.x版本上使用的虚拟滚动表格，并且内置表格相关的分页、表单、打印、字段控制、导出等功能，实用且强大。虽然我自己也为公司基于elemnt UI做了相同功能的虚拟滚动表格，但如果vxe-table早发布半年，我肯定选择它，绝不会自己造轮子。
VUE 3.x：
vxe-table 官网地址
vxe-table同样有支持vue3.x版本的组件库，绝大多数的api和属性沿用，纵向丝滑升级感受。
element-plus 官网地址
从名字上就知道这是elementUI的升级版，是支持vue3.x版本的ui组件库。其中的 el-table-v2是专门支持虚拟滚动的表格组件。
TDesign 官网地址 :
腾讯的TDesign同样也包含vue版本 内部有支持虚拟滚动的table，另外还包含 移动端、小程序端的ui库。
Surely Vue 官网地址 :
Surely Vue 是由 Ant Design Vue 核心团队开发维护，可以理解是Ant Design Vue 的拓展，但目前支持vue 3.x。另外还有一个小遗憾，Surely Vue的免费版会有广告水印存在。
下方是我自己验证时使用的去水印指令，验证需要自取。如果大家是商用Surely Vue的话，还是建议联系 Surely Vue官网购买授权码用于去水印。
ClearStable.js 编写指令逻辑
// ClearStable.js
const ClearStable = {
beforeMount(el, binding, vnode, prevVnode) {
let domArr = el.querySelectorAll('.surely-table div') // 获取元素
for (let i = 0; i < domArr.length; i++) {
// 遍历元素
let node = domArr.item(i)
if (['Unlicensed Product','Powered by Surely Vue'].includes(node.innerText)) {
node.innerText = "" // 满足条件则清空内容。
}
}
}
}
export default ClearStable
main.js 挂载指令
// main.js
import {
createApp } from 'vue'
import ClearStable from './directives/clearStable.js'
// 引入 根组件
import App from './App.vue'
// 创建vue实例
const app = createApp(App)
app.directive('clearStable', ClearStable)
app.mount('#app')
使用 v-clearStable指令
<s-table v-clearStable
:columns="columns"
:data-source="dataSource">
</s-table>
以上指令代码仅供个人测试使用，请勿商用。呼吁尊重组件团队的开发成果。
如果对文章有建议，欢迎大家可以留言或者私信。