基于Ant Vue 封装a-table虚拟表格插件

🔨 简介

ATableVirtual

适用于a-table的虚拟滚动表格插件

ATableVirtual是一个基于 Vue3 、ant-design-vue、 a-table组件开发,更加轻量级的插件,让我们能更专注于业务组件的开发。 tips:目前仅适用于v3版本，v2版本ing

✨ 特性

•  ATableVirtual暂时的目标是打造一个1千行&&1千列的性能王者。
•  开箱即用的a-table-virtual组件,更加轻量级、少侵入性代码、无需改造业务代码。

🌈 效果

首先看下使用虚拟表格的加载效果 可以看到使用了虚拟表格的加载方式，渲染300行300列的数据大概耗时300ms，而普通加载方式约7000ms左右。

ps：这里只加载了300行，300列的表格数据。普通的加载方式300行左右就会卡死了，为了录制效果暂时加载了300行。下面是录制的加载gif图

使用虚拟表格的滚动效果

源码传输门以及实现思路，欢迎小星星~

🎨 使用

使用文档doc，文档是基于vitepress

// 安装插件
    npm i a-table-virtual

// 导入插件
    import VirtualTablePlugin from "a-table-virtual";
    app.use(VirtualTablePlugin);

// 在组件中使用，以指令的方式
    <a-table
      v-virtual-table-scroll
      :columns="columns"
      :data-source="dataList.slice(start, over)"
      bordered
      :pagination="false"
      :scroll="{ x: 0, y: scrollHeight }"
    >
    </a-table>

    <script setup>

    import {inject } from "vue";
    const { start, over } = inject("dataListOptions");
    let scrollHeight = 300;

    </script>
    
    

npm地址： www.npmjs.com/package/a-t…

组件库站点：bigpengzai.github.io/ssgcmpstep1…

github地址： github.com/BigPengZai/…,欢迎star以及mr

💡 思路

这次主要从功能性、公用性、扩展性、轻量级、少侵入性等方面入手。

想法一：

常见的实现方案，数据分页 || 分片加载。

1、使用组件的 pagination

2、 懒加载数据 （）

缺点：

界面交互发生改变

想法二：

“武功秘籍”-查看官方文档， 使用官方的Surely Vue Table，但是。。。

Surely Vue 是 Ant Design Vue 技术团队全职开发维护，我们在保障 Ant Design Vue 完全开源的情况下，不断寻找靠谱的商业模式，我们期望通过 Surely Vue 获取一定的收入，然后招聘更多的技术专家，开发更多的功能。

我们还期望这是一个独立的组件，你可以很方便的集成到各种组件库中。

是的，这是个一个收费的组件 ：www.surely.cool/doc/guide#快速开始

（ tips:收费 ，价值20w的性能组件。哈哈~）

想法三：

自己造轮子哦~ 这里又回面临几个问题，

1. 将atable的源码荡下来，本地改造组件，关联了其他的子组件，改造成本太高。

   • 改变原有的父子组件，牵涉上下文较多
   • 项目中单独引用文件夹，配置项修改较多

2. 现有业务逻辑已经沉淀很久，不能变更原有组件的使用。使用成本增加的话，就失去封装组件的意义了。

3. 最好能通过类似透传属性的方式，尽量不改动原有业务逻辑。降低使用成本。

关于组件复用，最能想到的就是通过 mixin方式，但是 只能复用核心逻辑，dom的操作还是得ref 。并且V3官方不推荐使用。

封装成一个组件的话，改变了原来的父子结构，可能还会牵扯其他功能的问题，并且需要使用者去写的东西依然很多。

最后就是，这个地方为什么会想到用指令的方式 ？ ps:这里仅仅在原来的基础上面 增加：v-virtual-table-scroll 这么个指令，使用者就很舒服

<a-table 
    v-virtual-table-scroll 
    :columns="columns" 
    :data-source="dataList.slice(start, over)" 
    bordered :pagination="false" 
    :scroll="{ x: 0, y: scrollHeight }" > 
</a-table>

自定义指令，涉及dom的操作。

tips:只有当所需功能只能通过直接的 DOM 操作来实现时，才应该使用自定义指令。

结合遐想1的思路，能不能操作 真实的DOM，以及之前写过的 virtual-list 的方案。

github.com/BigPengZai/… ，欢迎star~

⚙️ 为什么要去搞这个轮子

• 在前端开发领域，表格一直都是一个高频出现的组件，尤其是在中后台和数据分析场景。 但是，对于Table来说，当一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题，体验不是很好。
• 通过虚拟化表格组件，超大数据渲染将不再是一个头疼的问题。
• 针对于目前 ant-design-vue 中的 Surely Vue Table,很遗憾，这是一个商业化组件。并不能直接使用。

🔨 TODO功能点

以下是当前已经支持和正在开发中的功能，如果感兴趣可以一起~~。

ATableVirtual-项目源码

功能	状态
Y轴的虚拟滚动	✅
X轴的方向的懒加载	✅
X轴 && Y轴的虚拟滚动	🚧
V2版本的支持	🚧
暴露按需加载的load方法	🚧