组件文档

Appearance

Return to top
On this page

AdTableForm组件

通过配置JSON快速构建表单列表，支持动态添加删除，动态验证

按钮权限控制

如何设置权限数据

标准的列表的数据结构

js
const res = {
  data: {
    records: [],
  },
};

表单列表配置

自定义只读

  • readOnly可以是boolean，也可以是函数，接收2个参数，第一个参数是一行的数据，第二个参数是第几行
  • 案例第二行,性别只读

同一列通过不同的规则，渲染不同的下拉框选项

  • optionsRule是一个函数函数，接收2个参数，第一个参数是一行的数据，第二个参数是第几行
  • 案例商户号

AdTableForm Prop

属性名说明类型默认值属性
model-value / v-model绑定值Record<string, any>——
table表格配置Partial<TableProps<T>>—查看
columns列配置Array<Partial<FormColumn<T>>>—查看
events表格事件配置Partial<TableEmits<T>>—查看
handleTableHeaderClick表头点击回调
——
handleTableRowClick行点击回调
——
isAutoLoadable是否自动加载数据booleantrue—
api数据获取 API
——
reqHandler请求参数处理器
——
respHandler响应数据处理器
——
globalReadOnly全局只读booleanfalse—
minQuantity限制最小数量number1—
maxQuantity限制最大数量number——
showAdded是否展示新增按钮booleantrue—
showDelete是否展示删除按钮booleantrue—
submit接收表单验证成功的数据(row: T[]) => voidtrue—

类型声明

显示类型声明
ts
import type { TableColumnCtx, TableProps } from 'element-plus';
import { TableEmits } from '../table/types';
import { ComponentsProps } from '../form';
export type FormColumn<T = any> = TableColumnCtx<T> & {
  hidden: boolean;
  tag: boolean;
  readOnly: (row: T, index: number) => boolean | boolean;
} & ComponentsProps;

export interface AdTableFormPorps<M = any, T = any> {
  modelValue?: Record<string, any>;
  table?: Partial<TableProps<T>>;
  events?: Partial<TableEmits<T>>;
  globalReadOnly?: boolean;
  columns?: Array<Partial<FormColumn<T>>>;
  handleTableHeaderClick?: (key: string, column: Partial<FormColumn<T>>) => void;
  handleTableRowClick?: (key: string, row: T, rowIndex: number) => void;
  isAutoLoadable?: boolean;
  api: (queryForm?: Record<string, any>) => Promise<any>;
  reqHandler?: (queryForm?: M) => M;
  respHandler?: (data?: Record<string, any>) => Record<string, any>;
  minQuantity?: number;
  maxQuantity?: number;
  showAdded?: boolean;
  showDelete?: boolean;
  submit: (row: T[]) => void;
}

export interface AdTableFormEmits {}

export interface AdTableFormInstance {
  fetchData: () => Promise<void>;
  submit: () => void;
}