该库因为设计问题,目前已声明为废弃状态,与最新版本的Formily也有兼容性问题,不再提供后续更新与支持
"@formily/antd": "2.0.9",
"@formily/core": "2.0.9",
"@formily/reactive": "2.0.9",
"@formily/reactive-react": "2.0.9",
"@formily/grid": "2.0.9",
"@formily/json-schema": "2.0.9",
"@formily/react": "2.0.9",
现有的antd-formily-boost库仅支持@formily的2.0.9版本
在 Ant Design Table 组件的基础,包装为一个高性能,易组合,超低开发成本的表格组件,让 CURD 操作变得简单
在使用 Ant Design Table 组件的过程中,我发现以下问题:
而且,Antd Design Table 缺少开箱即用的虚拟滚动实现,并且限制还有:
import { createForm, onFieldReact } from '@formily/core';
import { createSchemaField, FormConsumer, Schema } from '@formily/react';
import { Label, Table, Link, SpaceDivider } from 'antd-formily-boost';
import { Form, FormItem, Input, Select, Space } from '@formily/antd';
import React, { useMemo } from 'react';
import { observable } from '@formily/reactive';
import { PaginationType } from 'antd-formily-boost/Table';
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
Table,
Label,
Link,
SpaceDivider,
},
});
type DataType = {
name: string;
age: number;
};
let lastState: { data: DataType[]; pagniaction: PaginationType } = observable({
data: [],
pagniaction: {
current: 0,
pageSize: 10,
},
});
for (var i = 0; i != 100; i++) {
lastState.data.push({
name: 'fish_' + i,
age: i,
});
}
export default () => {
const form = useMemo(() => {
return createForm({
values: lastState,
});
}, []);
return (
<Form form={form} feedbackLayout="terse">
<SchemaField>
<SchemaField.Array
name="data"
x-component="Table"
x-component-props={{
bordered: true,
paginaction: 'pagniaction',
paginationProps: {
defaultPageSize: 10,
showQuickJumper: true,
showTotal: true,
},
}}
>
<SchemaField.Void>
<SchemaField.Void
x-component="Table.RadioColumn"
x-component-props={{
dataIndex: '_checked',
selectRowByClick: true,
}}
/>
<SchemaField.Void
title="名字"
x-component="Table.Column"
x-component-props={{
width: '30%',
}}
>
<SchemaField.String
name="name"
x-component={'Label'}
/>
</SchemaField.Void>
<SchemaField.Void
title="年龄"
x-component="Table.Column"
x-component-props={{
width: '70%',
}}
>
<SchemaField.String
name="age"
x-component={'Label'}
/>
</SchemaField.Void>
</SchemaField.Void>
</SchemaField.Array>
</SchemaField>
</Form>
);
};
antd-formily-boost 从Formily的先进的 Reactive 与 Schema 设计出发,大幅简化对 Table 组件的实现。它的特点是:
import { createForm, onFieldReact } from '@formily/core';
import { createSchemaField, FormConsumer, Schema } from '@formily/react';
import { Label, Table, Link, SpaceDivider } from 'antd-formily-boost';
import { Form, FormItem, Input, Select, Space } from '@formily/antd';
import React, { useMemo } from 'react';
import { observable } from '@formily/reactive';
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
Table,
Label,
Link,
SpaceDivider,
},
});
type DataType = {
name: string;
age: number;
};
let lastState: { data: DataType[] } = observable({
data: [],
});
for (var i = 0; i != 10000; i++) {
lastState.data.push({
name: 'fish_' + i,
age: i,
});
}
export default () => {
const form = useMemo(() => {
return createForm({
values: lastState,
});
}, []);
return (
<Form form={form} feedbackLayout="terse">
<SchemaField>
<SchemaField.Array
name="data"
x-component="Table"
x-component-props={{
bordered: true,
scroll: {
x: 1000,
y: 400,
},
virtualScroll: {
itemHeight: {
size: 'default',
compact: true,
},
},
}}
>
<SchemaField.Void>
<SchemaField.Void
x-component="Table.RadioColumn"
x-component-props={{
dataIndex: '_checked',
selectRowByClick: true,
}}
/>
<SchemaField.Void
title="名字"
x-component="Table.Column"
x-component-props={{
width: '30%',
}}
>
<SchemaField.String
name="name"
x-component={'Label'}
/>
</SchemaField.Void>
<SchemaField.Void
title="年龄"
x-component="Table.Column"
x-component-props={{
width: '70%',
}}
>
<SchemaField.String
name="age"
x-component={'Label'}
/>
</SchemaField.Void>
</SchemaField.Void>
</SchemaField.Array>
</SchemaField>
</Form>
);
};
最后 antd-formily-boost 的目前版本中,有开箱即用的虚拟滚动实现,像上面这种代码,只需加入 virtualScroll 属性就能打开虚拟滚动,让开发者无痛一键使用表格虚拟滚动的功能,虚拟滚动支持的场景包括有:
文档在这里
$ npm install antd-formily-boost --save
直接包含以上包即可
$ npm i
安装依赖
$ npm start
启动服务器
$ npm run docs:build
生成文档
$ npm run build
编译代码