antd-editabletable：基于Ant Design的高性能可编辑表格组件

最新推荐文章于 2024-11-15 16:23:37 发布

瞿蔚英Wynne

最新推荐文章于 2024-11-15 16:23:37 发布

阅读量921

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00247/article/details/140975341

版权

antd-editabletable：基于Ant Design的高性能可编辑表格组件

项目地址:https://gitcode.com/gh_mirrors/ed/editable-table

一、项目介绍

antd-editabletable 是一款基于 Ant Design v4.x 的高效可编辑表格组件库，专为处理大量数据而设计，确保在拥有400个以下表单项时能够保持流畅的操作体验。对于超过400项的数据展示，建议优化交互设计以提升用户体验。

关键特性

高度定制化: 用户可以自由配置表格中每一个单元格的表单类型。
动态验证: 支持对表单进行实时校验，增强数据输入的有效性。
兼容性: 目前仅支持 Ant Design 4.x 版本，后续将考虑增加对其他版本的支持。

二、项目快速启动

安装依赖

首先，确保你的开发环境中已安装 Node.js 和 NPM。然后，在项目目录下执行以下命令来引入 antd-editabletable：

npm install --save antd-editabletable

使用示例

方法1：通过`columns`属性控制表单元素

import { useState } from 'react';
import EditableTable from 'antd-editabletable';

const [selectedRowKeys, setSelectedRowKeys] = useState([]);

return (
    <EditableTable 
        pagination={false} 
        size="middle"
        showAdd 
        rowKey={(record) => record.key}
        onAdd={() => {
            setDataSource([
                ...dataSource,
                getNewRecord(`${dataSource.length + 1}`)
            ]);
        }} 
        addText="添加"
        columns={getColumns()} 
        dataSource={dataSource}
        onChange={(key, value, record, newDataSource) => {
            setDataSource(newDataSource);
        }}
        scroll={{ y: window.innerHeight - 300 }}
        rowSelection={{
            selectedRowKeys,
            onChange: (newSelectedRowKeys) => {
                setSelectedRowKeys(newSelectedRowKeys);
            },
            hideDefaultSelections: false,
            getCheckboxProps: (record) => ({
                disabled: record.key === '2'
            })
        }}
    />
);

方法2：通过`dataSource`控制不同类型的表单元素

import EditableTable from 'antd-editabletable';

const getConfig = (formItemType) => {
    // ... 配置逻辑 ...
};

// 利用 `getConfig` 函数填充你的 `dataSource`
<EditableTable dataSource={dataSource} />;