查看 ContainerCommonConfig / RowConfig / TabConfig / TabPaneConfig / FieldsetConfig / PanelConfig / StepConfig / FlexLayoutConfig / GroupListConfig / TableConfig / TableColumnConfig / TableGroupListCommonConfig 配置类型定义

export interface ContainerCommonConfig<T = never> extends FormItem {
  items: FormConfig<T>;
  onInitValue?: (
    mForm: FormState | undefined,
    data: {
      formValue: FormValue;
      initValue: FormValue;
    },
  ) => FormValue;
  extensible?: boolean;
}

export interface RowConfig<T = never> extends FormItem {
  type: 'row';
  span: number;
  items: ({ span?: number } & (ChildConfig<T> | EditorChildConfig | T))[];
}

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;
}

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;
}

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;
}

export interface PanelConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
  type: 'panel';
  expand?: boolean;
  title?: string;
  schematic?: string;
}

export interface StepConfig<T = never> extends FormItem {
  type: 'step';
  /** 每个 step 的间距，不填写将自适应间距。支持百分比。 */
  space?: string | number;
  items: StepItemConfig<T>[];
}

export interface FlexLayoutConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
  type: 'flex-layout';
  /** flex 子项间距，默认 '16px' */
  gap?: string;
}

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;
}

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;
}

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;
  };
}

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>;
}

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';
}

布局

配置类型

基础用法

布局 ​

配置类型 ​

基础用法 ​

布局

配置类型

基础用法