表格与表单引擎

在企业级前端应用中，表格和表单是最核心的两种数据交互形态。本文对比 ProTable、Formily、XRender、FormRender 四大方案，分析其原理与自定义能力。

方案概述

方案	所属生态	定位	GitHub Stars	维护方
ProTable	React (Ant Design)	高级表格组件	39k+ (pro-components)	蚂蚁集团
Formily	React/Vue 双生态	表单/表格 DSL 引擎	12k+	阿里集团
XRender	React	表单/表格/图表一体	7k+	阿里集团
FormRender	React	JSON Schema 表单渲染	4k+	阿里集团

ProTable — 开箱即用的高级表格

ProTable 是 Ant Design Pro 生态中的核心表格组件，封装了表格的大量常见需求。

核心特性

查询表单一体化：表格头部直接集成搜索表单
列配置可扩展：通过 columns 配置即可实现排序、筛选、操作列
工具栏集成：刷新、密度调整、列显隐、导出
批量操作：选择行、批量删除/编辑
请求封装：与后端请求无缝对接，自动管理 loading 和分页

代码示例

tsx

import { ProTable } from '@ant-design/pro-components';

const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age', valueType: 'digit' },
  { title: '状态', dataIndex: 'status', key: 'status', valueType: 'select',
    valueEnum: { 1: { text: '启用', status: 'Success' }, 0: { text: '禁用', status: 'Error' } }
  },
  { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', valueType: 'dateTime' },
  { title: '操作', key: 'action', render: (_, record) => [<a>编辑</a>, <a>删除</a>] },
];

<ProTable columns={columns} request={fetchUsers} rowKey="id" />

自定义能力

维度	能力
自定义列渲染	通过 `render` 函数完全控制
自定义操作栏	`toolBarRender` 扩展工具栏
自定义查询表单	`search` 配置 + 自定义表单项
自定义表格样式	CSS-in-JS + className
扩展行为	可通过 `onLoad`、`onChange` 等钩子介入

Formily — 企业级表单 DSL 引擎

Formily 是阿里集团开源的跨端表单解决方案，核心是 Schema 驱动的表单渲染引擎。

架构原理

User Code (JSX / JSON Schema)
       ↓
  Formily Core (Form/Field/Validator)
       ↓
  UI Adapter (Ant Design / Element / Fusion)
       ↓
    Browser / WeChat / etc.

JSON Schema 驱动

json

{
  "type": "object",
  "properties": {
    "userName": {
      "type": "string",
      "title": "用户名",
      "required": true,
      "x-component": "Input",
      "x-component-props": { "placeholder": "请输入用户名" },
      "x-rules": [
        { "pattern": "^[a-zA-Z]\\w{2,15}$", "message": "用户名格式不正确" }
      ]
    },
    "email": {
      "type": "string",
      "title": "邮箱",
      "format": "email",
      "x-component": "Input",
      "x-validator": "email"
    }
  }
}

表单联动

Formily 通过 reactions 或 x-reactions 实现强大的联动逻辑：

json

{
  "type": "string",
  "title": "城市",
  "x-component": "Select",
  "x-reactions": {
    "dependencies": ["province"],
    "fulfill": {
      "state": { "visible": "{{$deps[0] === '北京'}}" },
      "schema": { "enum": "{{$deps[0] === '北京' ? ['朝阳','海淀'] : ['浦东','静安']}}" }
    }
  }
}

XRender — 表单/表格/图表一体化

XRender 是阿里开源的中间件解决方案，提供 FormRender（表单）、TableRender（表格）、ChartRender（图表）三大核心组件。

表格渲染

tsx

import { TableRender } from '@alilc/lowcode-datasource-types';

const columns = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '名称', dataIndex: 'name', render: (val) => <Ellipsis text={val} /> },
  { title: '操作', dataIndex: 'op', render: () => <ActionGroup actions={[...]} /> },
];

<TableRender
  columns={columns}
  request={fetchList}
  toolbar={{
    append: <Button>新建</Button>,
  }}
/>

自定义组件

XRender 支持通过 widgets 注册自定义组件，实现高度灵活的表单项：

tsx

import { FormRender } from '@alilc/xform-render';

const widgets = {
  myUpload: (props) => <MyUpload {...props} />,
  colorPicker: (props) => <input type="color" {...props} />,
};

<FormRender schema={schema} widgets={widgets} />

FormRender — 轻量 JSON Schema 表单

FormRender 是 XRender 的子集，专注于 JSON Schema 到表单的渲染。其核心特点是轻量、灵活、易上手。

核心 API

tsx

import FormRender from 'form-render/lib/antd';

const schema = {
  type: 'object',
  properties: {
    string: { title: '字符串', type: 'string' },
    number: { title: '数字', type: 'number' },
    boolean: { title: '是否', type: 'boolean' },
    select: { title: '下拉框', type: 'string', enum: ['a', 'b', 'c'], enumNames: ['选项A', '选项B', '选项C'] },
  },
};

<FormRender schema={schema} formData={data} onChange={setData} />

核心原理对比

JSON Schema 驱动表单

所有方案都采用 JSON Schema 驱动的设计理念：

定义 Schema：通过 JSON 描述表单结构、字段类型、校验规则
解析 Schema：引擎解析 JSON，映射到对应的 UI 组件
渲染表单：根据解析结果渲染完整的表单 UI
数据绑定：表单数据自动与 Schema 绑定，双向同步

[JSON Schema] → [Schema Parser] → [Widget Mapper] → [UI Renderer] → [Form]
                            ↓
                   [Validator Engine] → [Validation Result]

表格列配置

[columns array] → [Column Manager] → [Column Renderer] → [Table]
     ↓
[width / fixed / sorter / filter / render]

性能对比

维度	ProTable	Formily	XRender	FormRender
Bundle Size	较大（含组件库）	中等	中等	较小
渲染性能	优（虚拟滚动）	优（按需渲染）	中	中
大数据表格	✅ 支持	❌ 不推荐	✅ 支持	❌ 不适用
复杂联动	有限	✅ 强	✅ 强	有限
跨端渲染	❌	✅ 支持	❌	❌

自定义组件能力

方案	自定义方式	难度
ProTable	`render` 函数 + 自定义组件	低
Formily	`x-component` 映射 + 注册组件	中
XRender	`widgets` 自定义组件注册	中
FormRender	`widgets` 自定义组件注册	低

选型建议

需要快速搭建 CRUD 页面 → 首选 ProTable，开箱即用程度最高
表单逻辑复杂、联动频繁 → 首选 Formily，DSL 引擎能力最强
需要同时管理表单和表格 → 推荐 XRender，统一的管理方式
只想用轻量的 JSON Schema 表单 → 推荐 FormRender，体积最小
需要跨端（Web/小程序） → 推荐 Formily，跨端适配最好

表格与表单引擎 ​

方案概述 ​

ProTable — 开箱即用的高级表格 ​

核心特性 ​

代码示例 ​

自定义能力 ​

Formily — 企业级表单 DSL 引擎 ​

架构原理 ​

JSON Schema 驱动 ​

表单联动 ​

XRender — 表单/表格/图表一体化 ​

表格渲染 ​

自定义组件 ​

FormRender — 轻量 JSON Schema 表单 ​

核心 API ​

核心原理对比 ​

JSON Schema 驱动表单 ​

表格列配置 ​

性能对比 ​

自定义组件能力 ​

选型建议 ​