可编辑表格(React hooks)
一个基于 antd 的 React 组件, 可以编辑表格的内容并实时保存。
Features
- 行/列可编辑
- tab 键切换
- 自定义表单数据校验
- typescript 支持
- 支持 Select 控件
- 行/列/单元格禁用
何时使用
当表格涉及到内容的修改的时候
如何使用
安装
$ yarn add antd-editable
使用
默认已经开启所有的单元格可编辑。如需禁用某列的可编辑,只需要在传入 columns 里设置对应列的 editable 为 false。 如需禁用某行的可编辑,只需要在传入 dataSource 里设置对应行的 editable 为 false。
每一次输入框失焦后,会在组件内部保存一个新的 dataSource ,可以传入一个 onCellChange 的回调函数用于捕获这个实时的 dataSource 用于一些类似 dispatch 的操作。
示例代码
; ... 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 ; { console; } <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 的其他属性 | - | - |