antd-editable
v3.0.0
Published
一个基于 [antd](https://ant.design/index-cn) 的 React 组件, 可以编辑表格的内容并实时保存。
Downloads
70
Maintainers
Readme
可编辑表格(React hooks)
一个基于 antd 的 React 组件, 可以编辑表格的内容并实时保存。
Features
- [x] 行/列可编辑
- [x] tab 键切换
- [x] 自定义表单数据校验
- [x] typescript 支持
- [x] 支持 Select 控件
- [x] 行/列/单元格禁用
何时使用
当表格涉及到内容的修改的时候
如何使用
安装
$ 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 属性控制行列的可编辑。