可编辑表格(React hooks)
一个基于 antd 的 React 组件， 可以编辑表格的内容并实时保存。
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 的其他属性 | - | - |