!!!###!!!title=菜单功能——VisActor/VTable 教程文档!!!###!!!!!!###!!!description=VTable-Sheet提供了丰富的菜单功能,包括主菜单和右键上下文菜单,帮助用户快速执行常用操作。本章介绍如何配置和使用VTable-Sheet的菜单功能。!!!###!!!

菜单功能

VTable-Sheet提供了丰富的菜单功能,包括主菜单和右键上下文菜单,帮助用户快速执行常用操作。本章介绍如何配置和使用VTable-Sheet的菜单功能。

主菜单配置

VTable-Sheet支持在顶部显示主菜单,可以通过配置项自定义菜单内容:

const sheetInstance = new VTableSheet(document.getElementById('container'), {
  // 其他配置项...
  mainMenu: {
    show: true,  // 显示主菜单
    items: [
          {
            name: '导入',
            menuKey: MenuKey.IMPORT,  // 使用预定义的菜单键值
            description: '导入数据'  // 鼠标悬停时的提示信息
          },
          {
            name: '导出',
            items: [  // 可以嵌套多级菜单
              {
                name: '导出CSV',
                menuKey: MenuKey.EXPORT_CURRENT_SHEET_CSV,
                description: '导出当前表格为CSV格式'
              },
              {
                name: '导出Excel',
                menuKey: MenuKey.EXPORT_CURRENT_SHEET_XLSX,
                description: '导出当前表格为Excel格式'
              }
            ]
          }
    ]
  }
});

通过上面配置,主菜单效果如下:

从以上mainMenu配置结构可以看出,支持多级菜单,也支持嵌套子菜单。其具体定义如下:

  /** 主菜单 */
  mainMenu?: {
    /** 是否显示 */
    show?: boolean;
    /** 菜单项 */
    items?: MainMenuItem[];
  };

菜单项的配置项:

export interface MainMenuItem {
  /** 菜单项名称 */
  name: string;
  /** 菜单项唯一标识,如果配置了_menuKey中包含的值,点击菜单项时,会匹配内置逻辑(如配置了onclick,仍然优先匹配onclick) */
  menuKey?: MainMenuItemKey;
  /** 菜单项描述 */
  description?: string;
  /** 菜单项点击回调 */
  onClick?: () => void;
  /** 子菜单项 */
  items?: MainMenuItem[];
}

export enum MainMenuItemKey {
  /** 需要插件支持,请在plugins中配置 ExcelImportPlugin */
  IMPORT = 'import',
  /** 需要插件支持,请在plugins中配置 TableExportPlugin */
  EXPORT_CURRENT_SHEET_CSV = 'export-current-sheet-csv',
  /** 需要插件支持,请在plugins中配置 TableExportPlugin */
  EXPORT_CURRENT_SHEET_XLSX = 'export-current-sheet-xlsx'
}

可以看到menuKey可选项类型定义MainMenuItemKey定义的值目前支持三种,点击菜单项时,会匹配内置逻辑。这些key值涉及导入导出逻辑,需要同时再配置VTablePluginModules,来明确配置所需的ExcelImportPluginTableExportPlugin插件,这样功能才能正常执行。

menuKey是个选填参数,可以不配置。不配置的话请配合onClick属性来处理菜单项的点击事件。

上下文菜单(右键菜单)

VTable-Sheet也支持右键上下文菜单。此能力是基于@visactor/vtable-plugins中的ContextMenuPlugin插件实现。插件教程可以参考ContextMenuPlugin

这里主要强调下,如果想要修改默认的菜单项,可以通过VTablePluginModules来定义ContextMenuPlugin插件配置选项,来修改默认的菜单项。

通过这些菜单功能,VTable-Sheet能够提供丰富的用户交互体验,帮助用户高效操作和管理表格数据。