Nupital Pomp Mesmerises

    @withub/antd-formily-boost
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.22 • Public • Published

    antd-formily-boost

    特点

    在 Ant Design Table 组件的基础,包装为一个高性能,易组合,超低开发成本的表格组件,让 CURD 操作变得简单

    问题

    在使用 Ant Design Table 组件的过程中,我发现以下问题:

    • 表格嵌套表格,行选择,自定义 render 组件,分页等操作缺少直观的代码。排错麻烦,容易产生 bug。
    • 难以支持复杂的表格编辑操作,表格添加行,上移,下移,删除等操作。要实现的代码很多,而且代码重复。
    • 性能不高,即使修改单行数据,也会触发整个表格的重新 render。

    而且,Antd Design Table 缺少开箱即用的虚拟滚动实现,并且限制还有:

    • 不支持 column 的 render,fixed,仅支持 column 的 width
    • 不支持 rowSelection
    • 不支持 edit
    • 不支持 tree 数据
    • 不透明开关,打开虚拟列表和,不打开虚拟列表,代码差异很大,会波及其他代码都要改

    解决

    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,
                            pagination: '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 组件的实现。它的特点是:

    • Schema 与 Data 分离,我们能看到代码中仅仅在 Form 的顶头处传送了一次 data 以外,其他地方就没有写过关于 data 的代码。Formily 会通过 Schema 结构自动抽取正确的 Data 位置,并对这些位置的数据进行读写操作。
    • 可读性好,以上的代码同时实现了行选择,与分页功能。开发者需要的心智更少,只需要关注 Schema 的结构是如何在 XML 中表达就可以了,
    • 性能更好,Formily 机制尽可能少地触发整个 Table 的 render 操作
    • 动态性更好,基于 Formily 的实现,我们可以轻松实现任意列的动态控制显示与隐藏,同一行中不同列数据的联动,甚至直接从后端或者可视化编辑器中生成以上代码都可以。
    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 属性就能打开虚拟滚动,让开发者无痛一键使用表格虚拟滚动的功能,虚拟滚动支持的场景包括有:

    • 支持 column 的 width,fixed,以及自定义嵌套组件
    • 支持 rowSelection,checkbox 在树形数据下依然有点问题,在其他情况下运行正常
    • 支持 edit
    • 支持 RecursiveRow 或 ChildrenRow 这种树形数据,但依然不支持 ExpandableRow 的任意 expand 的树形数据
    • 透明开关,打开虚拟列表和,不打开虚拟列表,仅仅是一个属性设置而已,其他代码不用改

    文档

    文档在这里

    使用

    $ npm install antd-formily-boost  --save

    直接包含以上包即可

    编译

    $ npm i

    安装依赖

    $ npm start

    启动服务器

    $ npm run docs:build

    生成文档

    $ npm run build

    编译代码

    Keywords

    none

    Install

    npm i @withub/antd-formily-boost

    DownloadsWeekly Downloads

    3

    Version

    1.3.22

    License

    ISC

    Unpacked Size

    1.81 MB

    Total Files

    213

    Last publish

    Collaborators

    • jarwin