插件功能
VTable-Sheet中目前使用到了VTable的几个插件,具体包括:
- filter-plugin 筛选插件
- auto-fill-plugin 自动填充插件
- history-plugin 撤销重做(历史记录)插件
- table-series-number-plugin 表格序号插件
- highlight-header-when-select-cell-plugin 选中高亮表头插件
- context-menu-plugin 右键菜单插件
- table-export-plugin 表格导出插件
- excel-import-plugin 表格导入插件
原理主要是因为每个sheet是个VTable实例,所以可以像VTable一样使用其插件。
也因为如此,所以插件只能作用到单个的sheet上,不能作用到整个VTableSheet上。像导入导出这种能力,导入excel文件只能导入到当前的sheet中,而不是将文件中所有sheet都导入到VTableSheet中,导出时也只能导出当前的sheet。
后续会为VTableSheet提供插件扩展的能力,而不必拘泥于单个sheet的限制。 也希望大家能贡献一些插件,来丰富VTableSheet的功能。
配置插件
除了上面提到的VTableSheet中已经内置集成的插件,VTableSheet还支持用户通过VTablePluginModules配置插件,来扩展VTableSheet的表格插件功能。
引用插件前一定要确保@visactor/vtable-plugins和VTableSheet引用的版本一致,否则可能会出现插件不生效的情况。且熟知插件使用教程,具体可以参考VTable插件使用教程。如果想要扩展VTable的插件,可以参考VTable插件贡献。
配置示例:在VTableSheet初始化时配置循环滚动动画插件,来实现表格的循环滚动:
修改内置插件的配置
VTableSheet中内置的插件,可以通过VTablePluginModules配置插件,来修改插件的配置,内置插件有默认的配置项,用户配置会覆盖内置的默认配置,具体插件初始化代码逻辑地址:https://github.com/VisActor/VTable/blob/develop/packages/vtable-sheet/src/core/table-plugins.ts
具体以修改表格序号插件颜色为例:
禁用内置插件
如果想要禁用内置插件,可以通过VTablePluginModules配置插件,来禁用内置插件。 如禁用表格右键插件:
VTablePluginModules: [
{
module: VTablePlugins.ContextMenuPlugin,
disabled: true
}
]
插件与菜单的组合使用
插件与菜单的组合使用,具体菜单的配置可以参考菜单配置。
这里主要介绍说明菜单中增加导入导出的功能,在配置VTablePluginModules中需要明确配置所需的ExcelImportPlugin及TableExportPlugin插件。
下面示例中配置了mainMenu,UI左上角将出现主菜单按钮,点击主菜单按钮将出现导入导出功能,如图所示:

具体demo如:
示例中的MenuKey是VTableSheet内部定义的菜单键值。
export enum MenuKey { /** 需要插件支持,请在plugins中配置 ExcelImportPlugin */ IMPORT = 'import', /** 需要插件支持,请在plugins中配置 TableExportPlugin */ EXPORT_CURRENT_SHEET_CSV = 'export-current-sheet-csv', /** 需要插件支持,请在plugins中配置 TableExportPlugin */ EXPORT_CURRENT_SHEET_XLSX = 'export-current-sheet-xlsx' }
上面的导入导出功能,也可以通过API调用,初始化成功后的VTableSheet示例提供以下API来调用导入导出功能:
- exportSheetToFile
- importFileToSheet
通过插件系统,可以极大地扩展VTable-Sheet的功能,满足各种复杂的业务需求。如果想要自定义插件可以参考插件贡献