表格配置

基于 AeTable 组件的能力，您可以通过配置化渲染复杂的可编辑表格。表单内的可编辑表格通常需要「添加行」与「删除行」能力，下文将逐一说明配置方式。

添加表格组件

从左侧组件菜单将表格组件拖入画布。初始表格已自带「添加」按钮和操作栏「删除」按钮，您只需在列配置中调整表头与列字段即可。

为表格默认添加多行空行

若希望表格初始就展示若干空行便于用户直接填写，可使用**默认值（函数）**返回数组。

例如表格包含字段：姓名 name、年龄 age、性别 gender，可配置三行空数据如下：

return [
  { name: "", age: "", gender: "" },
  { name: "", age: "", gender: "" },
  { name: "", age: "", gender: "" }
];

为表格配置校验规则

表格校验分两层：

1. 整表（数组）校验：如要求「至少有一条数据」。在组件校验规则中，使用快捷校验里的 必填（数组） 即可，配置方式与其它组件一致。
2. 行内字段校验：如某列必填。进入列配置，选中对应列，在该列的快捷校验中选择 必填。

自定义前置按钮

表格默认通过插件配置中的前置插件在表格上方渲染「添加」按钮。若已了解插件机制，可在此处通过 _d_prependRender 扩展自定义前置按钮。

配置结构说明

字段	说明
enable	是否启用该 d 属性
prop	属性名，此处为 prependRender
value	前置区域要渲染的节点配置（类型、属性、子节点、条件、事件等）
resolver	解析器，此处使用 FORM_SCHEMA_DOM_FN

配置示例

1. 完整配置对象：

{
  // ... 其它表格配置
  _d_prependRender: {
    enable: true,
    prop: "prependRender",
    value: {
      type: "el-button",
      props: { type: "primary" },
      children: "添加",
      condition: { code: "!disabled" },  // 表单未禁用时显示
      events: {
        // click 的值为字符串，内容即下方「点击逻辑」代码块中的代码（配置时可为单行或 \n 换行）
        click: "..."
      }
    },
    resolver: "FORM_SCHEMA_DOM_FN"
  }
}

2. 按钮点击逻辑（events.click 中填入的代码）：

if (column.field) {
  if (!formModel[column.field] || !Array.isArray(formModel[column.field])) {
    formModel[column.field] = [];
  }
  const newRow = {};
  if (column.componentProps?.columns) {
    column.componentProps.columns.forEach((col) => {
      if (col.field && col.editable) {
        newRow[col.field] = col.editProps?.defaultValue ?? "";
      }
    });
  }
  formModel[column.field].push(newRow);
}

说明：condition.code 中的 disabled 来自表单自身的禁用状态；点击逻辑会根据列配置中的 columns 生成一行空数据并追加到当前表格数据中。

自定义操作栏事件

表格通过事件配置中的操作事件处理操作栏按钮点击。下面示例为通用写法，不依赖具体列配置，可根据 name 区分不同操作（如 delete 删除行）：

const { row, index, name } = event;
if (name === 'delete') {
  const field = column?.field;
  if (field && Array.isArray(formModel[field])) {
    formModel[field].splice(index, 1);
  }
}

说明：event 中可解构出 row（当前行数据）、index（行下标）、name（操作名），删除时需用表格字段名 column.field 从 formModel 中取对应数组再 splice。