leonGravel / antd-editable

A React component inherited from antd that can edit the table of a cell

可编辑表格(React hooks)

介绍

一个基于 antd 的 React 组件， 可以编辑表格的内容并实时保存。

TODO

• 行列可编辑
• 自动化测试
• 未保存数据提示
• 自定义表单数据校验
• 可分页
• 非受控组件

何时使用

当表格涉及到内容的修改的时候

如何使用

安装

    $ yarn add antd-editable

使用

默认已经开启所有的单元格可编辑。如需禁用某列的可编辑，只需要在传入 columns 里设置对应列的 editable 为false。 如需禁用某行的可编辑，只需要在传入 dataSource 里设置对应行的 editable 为 false。

示例代码

    import Editable from 'antd-editable';

    ...

   const dataSource = [
        {
            key: "1",
            name: "金鑫",
            age: 16,
            address: "慕和兰道304",
        },
        {
            key: "2",
            name: "张海新",
            age: 17,
            address: "慕和兰道304",
            editable: false
        },
        {
            key: "3",
            name: "李鳌",
            age: 15,
            address: "慕和兰道304"
        }
    ];

    const columns = [
        {
            title: "姓名",
            dataIndex: "name",
            key: "name",
            width: "30%"
        },
        {
            title: "年龄",
            dataIndex: "age",
            key: "age",
            width: "30%"
        },
        {
            title: "住址",
            dataIndex: "address",
            key: "address",
            editable: false
        }
    ];

    function handleTableChange(nextSource){
        console.log(nextSource);
    }

    <Editable 
        dataSource={dataSource} 
        columns={columns} 
        onChange={handleTableChange}
        bordered 
    />

    ...

API

同 antd-table 的API 。只需在 colums 和 dataSource 里加入 editable 属性控制行列的可编辑。目前仅支持受控

参数	说明	类型	默认值
columns	列描述数据对象	object[]	[]
dataSource	数据数组	any[]	[]
onChange	改变dataSource的方法	function	-
-	antd table 的其他属性	-	-