boost-table

Vue 2 高性能表格组件：antd-vue 1.x API 兼容 + DOM 渲染虚拟滚动。专为存量 Vue 2 项目在系统架构升级（微前端 / qiankun）后的大数据量性能问题设计——视觉与交互对齐 antd，API 与 antd-vue 1.x 保持兼容，替换成本低，同时通过虚拟滚动把万行级 DOM 节点从 1000+ 压到 ~200。

与 canvas 渲染的表格（如 AG Grid）不同，boost-table 使用语义化 DOM 渲染，保留 antd 的视觉、交互与无障碍语义，业务迁移时几乎无感知。

功能清单

对标 antd-vue 1.x Table API，勾选项为已完成；未勾选项在 Roadmap 中排期。

数据与渲染

• [x] 虚拟滚动：固定行高虚拟滚动，10,000 行数据下 DOM 节点稳定在 ~200，独立环境与 qiankun ProxySandbox 均无空白帧
• [x] 双渲染器：普通模式使用语义化 <table>，虚拟模式使用单滚动容器 + CSS Grid
• [x] 固定列：左右固定列、选择列、Summary 共用列宽与 sticky offset，横向滚动同步
• [x] 表头分组：column.children 多级表头
• [x] 空数据状态：保留表头，支持 emptyText 自定义
• [x] 加载态 loading / 边框 bordered / 尺寸 size
• [ ] 单元格合并：customCell 返回 colSpan / rowSpan

数据交互

• [x] 排序：单列排序，sortDirections 循环
• [ ] 多列排序：sorter.multiple 优先级 + sorter.compare
• [x] 筛选：多选/单选筛选、受控 filteredValue、自定义面板 filterDropdown
• [x] 分页：client / server / 兼容推断三种模式
• [x] 行选择：Checkbox / Radio、跨页保留、受控 selectedRowKeys
• [x] 树形数据：递归展平、受控/非受控展开、缩进图标
• [x] 展开行：expandedRowRender 自定义展开内容（与虚拟滚动互斥，自动降级）
• [x] Summary 总计行：普通模式 <tfoot> / 虚拟模式独立 Grid 对齐
• [x] ellipsis 超长省略 + hover Tooltip
• [ ] 行/单元格事件：onRow / onCell / customHeaderCell 事件透传
• [ ] 斑马纹 stripe
• [ ] 列宽拖拽：column.resizable
• [ ] 可编辑单元格：column.editable + 编辑态管理
• [ ] 拖拽排序：行拖拽重排

兼容与工程

• [x] antd-vue 1.x 兼容层：customRender、column.scopedSlots.customRender、column.slots.title 原样适配
• [x] 12 个实例方法：数据查询、选择、展开、滚动四类
• [x] TypeScript 声明：JavaScript 源码配套完整 .d.ts
• [x] qiankun 就绪：针对 qiankun 2.x JS 沙箱做专项性能验证
• [x] locale 基础文案（空态等）
• [ ] locale 完整化：排序/筛选/分页全量文案，对齐 antd locale 结构
• [ ] 无障碍 a11y：scope / aria-sort / 键盘导航
• [ ] 主题定制：--boost-* CSS 变量 token，整站换肤
• [x] 按需引入与 tree-shaking：sideEffects 声明 + 模块化 ESM（dist/es/）摇树验证

安装

npm install boost-table
# 或
yarn add boost-table

快速开始

全局注册（Vue 2 插件）

import Vue from 'vue';
import BoostTable from 'boost-table';
import 'boost-table/dist/boost-table.css';

Vue.use(BoostTable);

按需引入

<template>
  <boost-table
    :columns="columns"
    :data-source="data"
    :pagination="{ pageSize: 20 }"
  />
</template>

<script>
import { BoostTable } from 'boost-table';
import 'boost-table/dist/boost-table.css';

export default {
  components: { BoostTable },
  data() {
    return {
      columns: [
        { title: '名称', dataIndex: 'name', width: 200 },
        { title: '金额', dataIndex: 'amount', width: 150, align: 'right' },
      ],
      data: [{ key: 1, name: '示例项目', amount: 1000 }],
    };
  },
};
</script>

JS 与 CSS 分离：样式始终按需手动引入 boost-table/dist/boost-table.css。

ESM 产物按源码模块拆分（dist/es/），工具函数与组件相互独立，仅引入 normalizeColumn / normalizeColumns 时组件代码会被 tree-shaking 摇除 （npm run verify:tree-shaking 门禁验证）。

组件注册名 BoostTable，模板标签名 <boost-table>。不沿用 <a-table>，可与 antd-vue 1.x 共存迁移。

在线体验（CDN）

无需构建工具，直接复制到任意 HTML 即可运行（UMD 构建会自动注册到 window.Vue）：

<link rel="stylesheet" href="https://unpkg.com/boost-table/dist/boost-table.css" />
<div id="app">
  <boost-table :columns="columns" :data-source="data" :pagination="{ pageSize: 5 }" />
</div>

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/boost-table/dist/boost-table.umd.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        columns: [
          { title: '名称', dataIndex: 'name', width: 200 },
          { title: '金额', dataIndex: 'amount', width: 150, align: 'right' },
        ],
        data: [
          { key: 1, name: '示例项目', amount: 1000 },
          { key: 2, name: '高性能表格', amount: 2000 },
        ],
      };
    },
  });
</script>

文档

| 文档 | 内容 | |---|---| | 在线文档站 | 14 个可运行 Demo + API 参考（GitHub Pages 部署） | | API 参考 | Props、Column、Events、Slots、Methods 与边界说明 | | 使用示例 | 基础、选择、分页、虚拟滚动、树形、Summary、实例方法 | | 迁移指南 | antd-vue 1.x 迁移分级（A/B/C）与改造步骤 | | 开源对标 Roadmap | 对标 antd/Element/vxe 的改进计划与进度 | | 更新日志 | 版本变更记录 |

性能

最近一次性能门禁（10,000 行虚拟滚动）中，虚拟窗口 Vue 更新 p95：

| 环境 | p95 | |---|---| | 独立模式 | 2.1ms | | qiankun 2.10.16 模式 | 3.0ms |

关键手段：Object.freeze 冻结表格数据、选择状态变更只更新对应行、单滚动容器管理横纵双向滚动、CSS 类级样式隔离。

兼容性

• Vue >=2.6.14 <3（开发验证基于 2.7.16）
• qiankun 2.x（验证版本 2.10.16）
• 浏览器：browserslist: defaults（现代浏览器，构建目标 es2018；与 Vue 2.7 支持范围一致，不承诺 IE11）

包体积（gzip，npm run verify:bundle-size 门禁）

| 产物 | 大小 | 阈值 | |---|---|---| | dist/es（27 模块，摇树友好） | 33.9 KB | ≤ 60 KB | | boost-table.umd.js（script 直引） | 21.2 KB | ≤ 60 KB | | boost-table.css | 3.6 KB | ≤ 15 KB |

关键边界

• 虚拟滚动需同时设置 virtual: true、正数 rowHeight、scroll.y，且所有列必须有 width
• 虚拟滚动与树形数据、expandedRowRender 互斥，组合时自动降级为普通模式
• immutableData 是业务契约标记；组件不会代替业务冻结或复制 record
• 后端分页只能从当前页数据还原 selectedRows，跨页保留的 key 可能没有对应 record

本地开发

npm install
npm run dev          # 功能示例 http://localhost:5173/?demo=features
npm test             # 单元测试
npm run test:types   # 类型测试
npm run build:lib    # 组件库构建（dist/）

开源协议

MIT