tmagic-editor

Appearance

布局 ​

配置类型 ​

查看 ContainerCommonConfig / RowConfig / TabConfig / TabPaneConfig / FieldsetConfig / PanelConfig / StepConfig / FlexLayoutConfig / GroupListConfig / TableConfig / TableColumnConfig / TableGroupListCommonConfig 配置类型定义
ts
export interface ContainerCommonConfig<T = never> extends FormItem {
  items: FormConfig<T>;
  onInitValue?: (
    mForm: FormState | undefined,
    data: {
      formValue: FormValue;
      initValue: FormValue;
    },
  ) => FormValue;
  extensible?: boolean;
}
ts
export interface RowConfig<T = never> extends FormItem {
  type: 'row';
  span: number;
  items: ({ span?: number } & (ChildConfig<T> | EditorChildConfig | T))[];
}
ts
export interface TabConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
  type: 'tab' | 'dynamic-tab';
  tabType?: string;
  editable?: boolean;
  dynamic?: boolean;
  tabPosition?: 'top' | 'right' | 'bottom' | 'left';
  /** 当前激活的标签页，可以是固定值或动态函数 */
  active?:
    | string
    | ((mForm: FormState | undefined, data: { model: FormValue; formValue?: FormValue; prop: string }) => string);
  items: TabPaneConfig<T>[];
  onChange?: (mForm: FormState | undefined, data: any) => void;
  onTabAdd?: (mForm: FormState | undefined, data: any) => void;
  onTabRemove?: (mForm: FormState | undefined, tabName: string, data: any) => void;
  onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
  activeChange?: (mForm: FormState | undefined, tabName: string, data: any) => void;
}
ts
export interface TabPaneConfig<T = never> {
  status?: string;
  /** 标签页名称，用于关联 model 中的数据 */
  name?: string | number;
  title: string;
  lazy?: boolean;
  labelWidth?: string;
  items: FormConfig<T>;
  display?: boolean | 'expand' | FilterFunction<boolean | 'expand'>;
  onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
}
ts
export interface FieldsetConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
  type: 'fieldset';
  checkbox?:
    | boolean
    | {
        name: string;
        trueValue?: string | number;
        falseValue?: string | number;
      };
  expand?: boolean;
  legend?: string | FilterFunction<string>;
  schematic?: string;
}
ts
export interface PanelConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
  type: 'panel';
  expand?: boolean;
  title?: string;
  schematic?: string;
}
ts
export interface StepConfig<T = never> extends FormItem {
  type: 'step';
  /** 每个 step 的间距，不填写将自适应间距。支持百分比。 */
  space?: string | number;
  items: StepItemConfig<T>[];
}
ts
export interface FlexLayoutConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
  type: 'flex-layout';
  /** flex 子项间距，默认 '16px' */
  gap?: string;
}
ts
export interface GroupListConfig<T = never> extends TableGroupListCommonConfig {
  span?: number;
  items: FormConfig<T>;
  groupItems?: FormConfig<T>;
  tableItems?: FormConfig<T>;
  titleKey?: string;
  titlePrefix?: string;
  title?: string | FilterFunction<string>;
  itemExtra?: string | FilterFunction<string>;
  expandAll?: boolean;
  /**
   * 默认展开的数量，用于控制分组列表默认展示的项数
   * 当设置为数字时，表示默认展开指定数量的项
   * 当未设置时，默认展开第一项
   */
  defaultExpandQuantity?: number;
  delete?: (model: any, index: number | string | symbol, values: any) => boolean | boolean;
  copyable?: FilterFunction<boolean>;
  movable?: (
    mForm: FormState | undefined,
    index: number | string | symbol,
    model: any,
    groupModel: any,
  ) => boolean | boolean;
  moveSpecifyLocation?: boolean;
}
ts
export interface TableConfig<T = never> extends TableGroupListCommonConfig {
  items: TableColumnConfig<T>[];
  tableItems?: TableColumnConfig<T>[];
  groupItems?: TableColumnConfig<T>[];
  /** 最大高度 */
  maxHeight?: number | string;
  border?: boolean;
  /** 显示行号 */
  showIndex?: boolean;
  /** 操作栏宽度 */
  operateColWidth?: number | string;
  pagination?: boolean;
  /** 是否显示删除按钮 */
  delete?: (model: any, index: number, values: any) => boolean | boolean;
  copyable?: (model: any, data: any) => boolean | boolean;
  /** 是否显示导入按钮 */
  importable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
  /** 是否显示checkbox */
  selection?: (mForm: FormState | undefined, data: any) => boolean | boolean | 'single';
  copyHandler?: (mForm: FormState | undefined, data: any) => any;
  onSelect?: (mForm: FormState | undefined, data: any) => any;
  /** @deprecated 请使用 defaultSort */
  defautSort?: SortProp;
  defaultSort?: SortProp;
  /** 是否支持拖拽排序 */
  dropSort?: boolean;
  dropSortHandle?: boolean;
  dropActionButtonIcon?: any;
  copyActionButtonIcon?: any;
  deleteActionButtonIcon?: any;
  /** 是否显示全屏按钮 */
  enableFullscreen?: boolean;
  fixed?: boolean | 'left' | 'right';
  itemExtra?: string | FilterFunction<string>;
  titleTip?: FilterFunction<string>;
  rowKey?: string;
  sort?: boolean;
  sortKey?: string;
}
ts
export interface TableColumnConfig<T = never> extends FormItem {
  name?: string;
  label?: string;
  text?: string;
  width?: string | number;
  sortable?: boolean;
  items?: FormConfig<T>;
  itemsFunction?: (row: any) => FormConfig<T>;
  titleTip?: FilterFunction<string>;
  type?: string;
  addButtonConfig?: {
    props?: Record<string, any>;
    text?: string;
  };
}
ts
export interface TableGroupListCommonConfig extends FormItem {
  type: 'table' | 'groupList' | 'group-list';
  enableToggleMode?: boolean;
  /** 最大行数 */
  max?: number;
  enum?: any[];
  /** 是否显示添加按钮 */
  addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
  /** 新增的默认行，可以是函数动态生成或静态对象 */
  defaultAdd?: ((mForm: FormState | undefined, data: any) => any) | Record<string, any>;
  /** table 新增行时前置回调 */
  beforeAddRow?: (mForm: FormState | undefined, data: any) => boolean | Promise<boolean>;
}
ts
export interface FormItem {
  /** vnode的key值，默认是遍历数组时的index */
  __key?: string | number;
  /** 表单域标签的的宽度，例如 '50px'。支持 auto。 */
  labelWidth?: string | number;
  /** label 标签的title属性 */
  labelTitle?: string;
  className?: string;
  /** 字段名 */
  name?: string | number;
  /** 额外的提示信息，和 help 类似，当提示文案同时出现时，可以使用这个。 */
  extra?: string | FilterFunction<string>;
  /** 配置提示信息 */
  tooltip?: ToolTipConfigType | FilterFunction<ToolTipConfigType>;
  /** 是否置灰 */
  disabled?: boolean | FilterFunction;
  /** 使用表单中的值作为key，例如配置了text，则使用model.text作为key */
  key?: string;
  /** 是否显示 */
  display?: boolean | 'expand' | FilterFunction<boolean | 'expand'>;
  /** 值发生改变时调用的方法 */
  onChange?: OnChangeHandler;
  /** label 标签的文本 */
  text?: string | FilterFunction<string>;
  /** 右侧感叹号 */
  tip?: string;

  filter?: 'number' | OnChangeHandler;
  /** 是否去除首尾空格 */
  trim?: boolean;
  /** 默认值 */
  defaultValue?: any | DefaultValueFunction;
  /** 表单验证规则 */
  rules?: Rule[];
  extensible?: boolean;
  dynamicKey?: string;
  /** 是否需要显示`展开更多配置` */
  expand?: boolean;
  style?: Record<string, any>;
  fieldStyle?: Record<string, any>;
  labelPosition?: 'top' | 'left' | 'right';
}

基础用法 ​

[
  {
    name: "text",
    text: "配置1"
  },
  {
    name: "text2",
    text: "配置2"
  },
  {
    name: "text3",
    text: "配置3"
  }
]
显示配置

行内布局 ​

可以通过配置span，来指定行内的配置项占用多少位置，一行为24，例如一行要显示三个配置则 span 可以配置 8；四个则为 6。默认会自动调节在一行中显示。

[
  {
    type: "row",
    labelWidth: "100px",
    span: 8,
    items: [
      {
        name: "text",
        text: "配置1"
      },
      {
        name: "text2",
        text: "配置2"
      },
      {
        name: "text3",
        text: "配置3"
      }
    ]
  },
  {
    type: "row",
    span: 12,
    labelWidth: "100px",
    items: [
      {
        name: "text4",
        text: "配置1"
      },
      {
        name: "text5",
        text: "配置2"
      },
      {
        name: "text6",
        text: "配置3"
      }
    ]
  }
]
显示配置

混合布局 ​

[
  {
    name: "text0",
    labelWidth: "100px",
    text: "配置0"
  },
  {
    type: "row",
    labelWidth: "100px",
    items: [
      {
        name: "text",
        text: "配置1"
      },
      {
        name: "text2",
        text: "配置2"
      },
      {
        name: "text3",
        text: "配置3"
      }
    ]
  }
]
显示配置

对象容器 ​

Object ​

[
  {
    name: "data",
    items: [
      {
        name: "text2",
        text: "配置2"
      },
      {
        name: "text3",
        text: "配置3"
      }
    ]
  }
]
显示配置

fieldset ​

[
  {
    type: "fieldset",
    labelWidth: "100px",
    legend: "fieldset",
    items: [
      {
        name: "text",
        text: "配置1"
      },
      {
        type: "row",
        items: [
          {
            name: "text2",
            text: "配置2"
          },
          {
            name: "text3",
            text: "配置3"
          }
        ]
      }
    ]
  }
]
显示配置

legend 除了支持字符串，也支持函数，函数返回值作为标题展示，可根据表单数据动态生成：

[
  {
    type: "fieldset",
    labelWidth: "100px",
    legend: (mForm, { formValue }) => `当前值：${formValue.text || "空"}`,
    items: [
      {
        name: "text",
        text: "配置1"
      }
    ]
  }
]
显示配置

panel ​

[
  {
    type: "panel",
    title: "panel",
    items: [
      {
        name: "text",
        text: "配置1"
      },
      {
        type: "row",
        items: [
          {
            name: "text2",
            text: "配置2"
          },
          {
            name: "text3",
            text: "配置3"
          }
        ]
      }
    ]
  }
]
显示配置

tabs ​

[
  {
    type: "tab",
    items: [
      {
        title: "tab1",
        items: [
          {
            name: "text",
            text: "配置1"
          }
        ]
      },
      {
        title: "tab2",
        items: [
          {
            name: "text2",
            text: "配置2"
          },
          {
            name: "text3",
            text: "配置3"
          }
        ]
      }
    ]
  }
]
显示配置

数组容器 ​

groupList ​

[
  {
    type: "groupList",
    name: "group",
    items: [
      {
        name: "text",
        text: "配置1"
      },
      {
        type: "row",
        items: [
          {
            name: "text2",
            text: "配置2"
          },
          {
            name: "text3",
            text: "配置3"
          }
        ]
      }
    ]
  }
]
显示配置

table ​

[
  {
    type: "table",
    name: "table",
    items: [
      {
        name: "text",
        label: "配置1"
      }
    ]
  }
]
显示配置

step ​

[
  {
    type: "step",
    items: [
      {
        title: "步骤1",
        items: [
          {
            name: "text",
            text: "配置1"
          }
        ]
      },
      {
        title: "步骤2",
        items: [
          {
            name: "text2",
            text: "配置2"
          }
        ]
      }
    ]
  }
]
显示配置

flex-layout ​

[
  {
    type: "flex-layout",
    gap: "20px",
    items: [
      {
        name: "text",
        text: "配置1",
        span: 12
      },
      {
        name: "text2",
        text: "配置2",
        span: 12
      }
    ]
  }
]
显示配置

Powered by 腾讯视频会员平台技术中心

Copyright (C) 2025 Tencent.