puchenhui/antd-editable

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

可编辑表格(React hooks)

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

何时使用

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

如何使用

安装

    $ yarn add antd-editable

使用

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

每一次输入框失焦后，会在组件内部保存一个新的 dataSource ，可以传入一个 onCellChange 的回调函数用于捕获这个实时的 dataSource 用于一些类似 dispatch 的操作。

示例代码

    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 handleCellChange(nextSource){
        console.log(nextSource);
    }

    <Editable
        dataSource={dataSource}
        columns={columns}
        onCellChange={handleCellChange}
        bordered
    />

    ...

更多用法

Features

• 行列可编辑
• css in js
• tab 键切换
• 自定义表单数据校验
• typescript 重构
• 未保存数据提示
• 可分页
• 自动化测试

API

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

参数	说明	类型	默认值
columns	列描述数据对象	object[]	[]
dataSource	数据数组	any[]	[]
onCellChange	改变dataSource的方法	function	-
onSubmit	保存按钮回调，如传入此属性，则会在表格下方多出一个button	function	-
btnProps	保存按钮的props, 与onSubmit联用, 可用 text 属性设置按钮文字	object	{ text: '保存', style: { marginTop: 10 } }
-	antd table 的其他属性	-	-