virtual-components

基于 Vue 3 的虚拟表格组件（JavaScript 实现，附带完整 TypeScript 类型声明），支持排序、列筛选、选择、行列拖拽、调整列宽、自定义单元格和滚动同步。

开发

npm install
npm run dev

构建 npm 包

npm run build:lib
npm pack

npm pack 和 npm publish 会通过 prepack 钩子自动执行库构建，因此即使 dist/ 中存在旧的应用构建产物，也会在打包前被替换为正确的库产物。

npm 压缩包只包含 dist/ 目录下的编译文件。JavaScript 文件在 Vite 压缩后会进行兼容型轻量混淆，关闭自保护、控制流平坦化等容易影响使用方构建工具的选项。混淆不等于加密，请勿在浏览器组件中存放密钥等敏感信息。

从 npm 安装

npm install virtual-components vue

import { createTable } from 'virtual-components'

组件入口会自动引入对应样式，使用根入口、components 入口或单组件入口时通常都不需要再手动引入 CSS。

const table = createTable('#table', {
  data: rows,
  columns,
})

表格组件只有 VirtualTableView 一套实现，createTable 挂载的就是它。初始化后可调用 table.updateOptions()、table.refresh() 和 table.destroy()。

按需引入组件

根入口会导出全部组件，也可以从 components 入口或具体组件路径按需引入：

import { VirtualTableView } from 'virtual-components/components'
import VirtualTableView from 'virtual-components/components/virtual-table/VirtualTableView'
import { createTable } from 'virtual-components/components/virtual-table'

如需兼容特殊构建环境，也可以手动引入完整样式：

import 'virtual-components/style.css'

后续在 src/components/ 中新增组件后，构建脚本会自动生成对应的独立入口。例如新增 Button.vue 后，可以通过 virtual-components/components/Button 引入。

selectionType: 'radio' 只改变选择框的外观。它仍支持多选、再次点击取消、表头全选/全不选，以及组件实例的 selectAll()、unselectAll() 方法。

组件文档与示例

• SelectionTransfer 文档 · SelectionTransfer Demo
• VirtualTableView 文档 · VirtualTableView Demo
• VirtualTableView 完整 API 手册 · 从 0 到 1 实现指南 · 性能设计与优化

SelectionTransfer 是新增的零运行时依赖双栏选择组件。它与 VirtualTableView 分别提供独立入口，均不依赖 Ant Design、图标库、Sortable 或第三方虚拟滚动组件。

表头选择框始终使用复选框样式，不受 selectionType 影响。selectionColumnDataIndex 用于指定控制整行全选/全不选的选择基准列，默认值为 name。例如传入 selection-column-data-index="device" 后，dataIndex: 'device' 对应的列将负责整行选择和半选状态。

nameColumnDataIndex 用于指定名称展示列，默认值同样为 name。名称列的专用文本样式、普通值兼容处理和行拖拽预览都会读取该属性。例如：name-column-data-index="deviceName"。

cellSelectionAffectsRow 用于控制其他单元格的选择是否联动选择基准列，默认值为 true：部分单元格选中时基准列显示半选，全部单元格选中时基准列显示选中。传入 :cell-selection-affects-row="false" 后，其他单元格不再修改选择基准列的状态。

发布前准备

发布前请在 package.json 中更新包名、版本号和仓库信息。如果包名已被占用，可以使用 npm 作用域，例如 @your-scope/virtual-table-view。