前端支持大数据量虚拟滚动表格的ui组件库（vue、react）

虚拟滚动的本质并不复杂，根据滚动位置和展示范围进行部分数据截取、渲染，本质上和分页原理相似，只是截取范围的开始和结束节点是动态而已。

但表格虚拟滚动的相关细节处理比较麻烦，比如未设置宽度的列如何计算、新渲染的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> 

以上指令代码仅供个人测试使用，请勿商用。呼吁尊重组件团队的开发成果。

如果对文章有建议，欢迎大家可以留言或者私信。