dropdown 下拉菜单使用介绍

在表格组件中，dropdown（下拉菜单）是一种常见的用户界面元素，通常用于提供选择或操作选项的列表。它以一个可展开的菜单形式出现，当用户点击或悬停在 Dropdown 上时，显示一个下拉列表，用户可以从中选择一个或多个选项。 使用案例如：

• 对数据操作：如对一条数据的修改，删除等操作，通过下拉菜单让用户选择。
• 排序选项：dropdown 菜单可以提供排序选项，允许用户根据不同的列或条件对表格数据进行排序或筛选。

配置项介绍

{
   /** 下拉菜单的相关配置。消失时机：显示后点击菜单区域外自动消失*/
  menu?: {
    /** 代替原来的option.menuType  html目前实现较完整 先默认html渲染方式*/
    renderMode?: 'canvas' | 'html';
    /** 内置下拉菜单的全局设置项 目前只针对基本表格有效 会对每个表头单元格开启默认的下拉菜单功能。代替原来的option.dropDownMenu*/
    defaultHeaderMenuItems?: MenuListItem[] | ((args: { col: number; row: number; table: BaseTableAPI }) => MenuListItem[]);
    /** 右键菜单。代替原来的option.contextmenu */
    contextMenuItems?: MenuListItem[] | ((field: string, row: number, col: number, table: BaseTableAPI) => MenuListItem[]);
    /** 设置选中状态的菜单。代替原来的option.dropDownMenuHighlight  */
    dropDownMenuHighlight?: DropDownMenuHighlightInfo[];
    /** 右键菜单是否只工作在单元格上。默认true只在单元格上显示右键菜单, 配置false在空白处也弹出右键菜单  */
    contextMenuWorkOnlyCell?: boolean;
  };
};

• renderMode：指定渲染方式；
• defaultHeaderMenuItems：指定表头默认配置项内容
• contextMenuItems：指定右键菜单列表
• dropDownMenuHighlight：如果菜单有对应的选中状态，在这里进行配置
• contextMenuWorkOnlyCell：右键菜单是否只工作在单元格上

示例

defaultHeaderMenuItems 示例：

该示例中配置了 defaultHeaderMenuItems，当鼠标 hover 到表头时即出现下拉菜单，如果想改变下拉菜单图标可通过注册覆盖方式：

  VTable.register.icon('dropdownIcon',{
          ......
          },
  );

contextMenuItems 右键菜单示例：

该示例中配置了 contextMenuItems，鼠标右键后弹出下拉菜单：

其他参考 demo:https://visactor.io/vtable/demo/interaction/context-menu

dropDownMenuHighlight 菜单初始选中状态示例：

 dropDownMenuHighlight: [
        {
          field:'Order ID',
          menuKey: '升序规则1'
        }
      ]

后续点击切换状态可通过接口：

setDropDownMenuHighlight(
[
        {
          field:'Order ID',
          menuKey: '升序规则1'
        }
      ]
)

全局&局部配置方式

• 全局指定表头上显示的下拉菜单，上面的例子中的配置形式；

• 局部配置方式指可以在某一列的表头上进行配置。

下面的示例中只在第一列上配置了下拉菜单：