a-table-virtual

1.0.9 • Public • Published

介绍



ATableVirtual

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

自然

ATableVirtual是一个基于 Vue3ant-design-vuea-table组件开发,更加轻量级的插件,让我们能更专注于业务组件的开发。

tips:目前仅适用于v3版本,v2版本ing

✨ 特性

  • 🌈 ATableVirtual暂时的目标是打造一个1千行&&1千列的性能王者,如果有大量数据需要渲染,界面可能会出现抖动。
  • 📦 开箱即用的a-table-virtual组件,更加轻量级、少侵入性代码、无需改造业务代码。
  • 🎨 如果有庞大业务需求,还是建议使用商业版本的 Surely Vue Table,但是很遗憾,这是一个商业化组件。并不能直接使用。

🌈 效果

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

loading

使用虚拟表格的滚动效果

loading

🤝 问题反馈

问题反馈

🔗 官网地址

atd-table-virtual

📦 安装

// 安装插件
    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>

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

  • 在前端开发领域,表格一直都是一个高频出现的组件,尤其是在中后台和数据分析场景。 但是,对于Table来说,当一屏里超过 1000 条数据记录时,就会出现卡顿等性能问题,体验不是很好。

  • 通过虚拟化表格组件,超大数据渲染将不再是一个头疼的问题。

  • 针对于目前 ant-design-vue 中的 Surely Vue Table,很遗憾,这是一个商业化组件。并不能直接使用。

功能点

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

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

Package Sidebar

Install

npm i a-table-virtual

Weekly Downloads

20

Version

1.0.9

License

MIT

Unpacked Size

14.4 kB

Total Files

16

Last publish

Collaborators

  • peytonpeng