Skip to content

Alkaids/antd-editable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

可编辑表格(React hooks)

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

NPM version NPM downloads

Features

  • 行/列可编辑
  • tab 键切换
  • 自定义表单数据校验
  • typescript 支持
  • 支持 Select 控件
  • 行/列/单元格禁用

何时使用

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

如何使用

安装

    $ 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
    />

    ...

更多用法

API

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

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