VisActor / VTable

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
https://visactor.io/vtable
MIT License
1.38k stars 95 forks source link

[Feature] ListTable.menu 右键菜单html渲染模式是否可以支持设定类名,以便覆写菜单样式 #2032

Open mzhang-eric opened 5 days ago

mzhang-eric commented 5 days ago

What problem does this feature solve?

目前ListTable.menu推荐使用html渲染模式,contextMenuItems 中可以传入 MenuListItem,其定义如下:

type MenuListItem =
  | string
  | {
      text?: string;
      type?: 'title' | 'item' | 'split';
      menuKey?: string;
      icon?: Icon;
      selectedIcon?: Icon;
      stateIcon?: Icon;
      children?: MenuListItem[];
    };

从文档看当前版本 option 中没有 menuStyle 的配置项,无法通过配置项修改右键菜单的样式,但是可以通过在样式中增加对应的样式来覆盖默认样式,例如:

.vtable__menu-element{
    background-color: #fff;
    min-width: 160px;

    .vtable__menu-element__item:not(.vtable__menu-element__split){
      height: 24px;
      padding: 1px 8px;

      .vtable__menu-element__content{
        font-size: 14px;
        font-weight: 400;
        color: #555;
        white-space: nowrap;
      }
    }
  }

但仍然存在一些问题,无法区分主菜单和子菜单,因为右键菜单的html结构中无法指定类名,子菜单也没有类似sub开头的类名来标识它是子菜单,因此无法针对各级菜单做定制化样式

What does the proposed API look like?

1.希望配置项中能有提供类似 menuStyle 的配置项 2.希望 MenuListItem 能够增加类名属性,便于开发者在样式覆写时能够准确定位到菜单和子菜单