贡献插件
每个业务使用 VTable 时,可能需要一些定制化的功能,此时可以通过插件来实现。把通用功能抽离成插件,可以避免重复造轮子,同时也可以方便其他业务使用。
共享插件,可以提高开发效率,减少维护成本!期望大家积极贡献插件,共同完善 VTable 生态!
贡献插件注意事项
- 插件需要遵循 VTable 的插件规范。
- 插件需要有详细的文档说明,包括插件的参数说明、使用示例等。
插件规范
接口规范
插件需要实现 VTable.plugins.IVTablePlugin 接口。
// 插件统一接口
export interface IVTablePlugin {
// 插件唯一标识
id: string;
// 插件名称
name: string;
// 插件运行时机
runTime: TableEvents[keyof TableEvents] | TableEvents[keyof TableEvents][];
// 初始化方法,在VTable实例创建后、首次渲染前调用
run: (...args: any[]) => void;
// 更新方法,当表格数据或配置更新时调用
update?: () => void;
// 销毁方法,在VTable实例销毁前调用
release?: (table: BaseTableAPI) => void;
}
其中runTime指定了插件的运行时机,配置是TableEvents中的事件类型。
注意:甘特图VTable-Gantt组件的插件需要实现 VTableGantt.plugins.IGanttPlugin 接口。
// 插件统一接口
export interface IGanttPlugin {
// 插件唯一标识
id: string;
// 插件名称
name: string;
// 插件运行时机,如果没有传入的话默认会Gantt构建时直接运行
runTime?: EVENT_TYPES[keyof EVENT_TYPES][];
// 初始化方法
run: (...args: any[]) => void;
// 更新方法,当Gantt数据或配置更新时调用
update?: () => void;
// 销毁方法,在Gantt实例销毁前调用
release?: (gantt: Gantt) => void;
}
其中runTime指定了插件的运行时机,配置是EVENT_TYPES中的事件类型。
组件的生命周期过程:

附Mermaid 序列图代码(后续如果有变动可以根据如下代码做调整更新,并更新上面的图片):
sequenceDiagram
participant User
participant DOM
participant ListTable
participant EventManager
participant PluginManager
participant Plugin as VTablePlugin
participant RenderManager
%% Initialization
ListTable->>PluginManager: register plugins
PluginManager->>Plugin: store plugin instances
%% User interaction flow
User->>DOM: interact (click, scroll, etc.)
DOM->>EventManager: dispatch browser event
EventManager->>PluginManager: notify(eventType, args)
PluginManager->>PluginManager: filter plugins by runTime
loop For each matching plugin
PluginManager->>Plugin: run(eventArgs, runTime, tableAPI)
Plugin->>ListTable: read/modify table state
Plugin->>Plugin: process event logic
end
Plugin->>ListTable: render request to update table
ListTable->>DOM: update display
%% table.updateOption
ListTable->>PluginManager: updateOption
PluginManager->>Plugin: updatePlugins()
%% table.release
ListTable->>PluginManager: release
PluginManager->>Plugin: release()
通过上图可以了解到插件的运行时机:
runTime在插件中的关键作用是指定了依赖VTable的哪些事件。- 在插件的
run方法中,可以获取到表格的实例,以及表格的配置和数据;同时需要在run方法中,处理插件具体的业务逻辑。 - 请记得在插件的
release方法中,释放插件占用的资源,避免内存泄漏。
插件文档说明
插件需要提供详细的文档说明,包括插件的参数说明、使用示例等。
文档一般需要包含以下 内容:
- 插件的名称
- 插件的描述
- 插件的参数说明
- 插件的使用示例
- 插件的注意事项
- 插件的源码地址
文档需要放在 docs/assets/plugins 目录下,文件名称为 plugin-name.md。