Ant Design Pro使用之--EditableProTable 可编辑表格
前言--EditableProTable 与 ProTable的对比
首先：可编辑表格 EditableProTable 与 ProTable 的功能基本相同；
但是如果用ProTable的话，增和改一般是采用弹出浮层表单的方式，为了让结构看起来清晰，一般还会将这个弹出框抽成一个子组件。这无疑就多写了些步骤。当然，如果表格数据项很多，表单项种类多的话，我个人还是建议用ProTable+弹出浮层表单进行增改操作，这样更清晰明了，也是别人能一眼看清结构的操作，弹出层中ProForm对于各类表单项的支持度也比较好，用EditableProTable的话，有些特殊表单项的某些特定设置可能很难生效，而且如果表单项种类多的话，写在同一个组件中也显得代码杂乱；
所以对于一些稍微简单的表格，比如就只有5项内的数据，或者用到的表单项比较单一，比如只需要文本框和下拉选择框这种基本的表单项类型，且不需要查询表格的情况下（因为EditableProTable关掉了查询表单和操作栏），可以使用EditableProTable可编辑表格，增和改也可以很方便地在同一个组件设置完成。
基本使用
EditableProTable大部分的api都是和ProTable相同的，如果本身对于ProTable不是很熟悉，可以看我之前的关于ProTable的文章：《Ant Design Pro使用之--ProTable踩坑小计及样式调整碎碎念》，对于ProTable有基本的了解之后，看EditableProTable就会简单许多。
在这里只说几个EditableProTable特有的主要属性及相关用法吧：
比如下面是一个例子：
const actionRef = useRef<ActionType>();
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
const [form] = Form.useForm();
<EditableProTable
columns={columns}
actionRef={actionRef}
options={false}
request={getData}
loading={false}
rowKey="id"
recordCreatorProps={{
position: 'bottom',
record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
creatorButtonText: '新增企业地址',
}}
editable={{
type: 'multiple',
editableKeys,
onlyAddOneLineAlertMessage: '请先保存地址后再新增',
onSave: async (rowKey, data) => {
save(data);
},
form,
onCancel: () => {
actionRef.current?.reload();
return Promise.resolve();
},
onChange: setEditableRowKeys,
actionRender: (_row, _config, dom) => [dom.save, dom.cancel],
}}
/>其中columns和request都是和ProTable相同的用法，便不再赘述，主要来说一下recordCreatorProps和editable两个属性：
1.recordCreatorProps：新建一行数据的相关配置。主要有以下小点：
- record：由于每次新增时都需要唯一的key，所以新增一行的时要保证证
recordCreatorProps.recordkey 唯一，不然会导致编辑出错，所以我这里为了避免与后端返回的id相冲，就取了个很大的随机数； - position：通过配置
position="top"|"bottom"可以配置增加按钮和增加的这一行是增加在表格头还是表格尾部； - 另外就是关于新建按钮的配置了，如果不想要这样的按钮，也可以通过
recordCreatorProps={false}就可以关掉按钮，同时使用actionRef.current?.addEditRecord(row)来控制新建行。相关配置放在下面了，官网也有详细解释。recordCreatorProps = { // 要增加到哪个节点下，一般用于多重嵌套表格 parentKey: React.key, // 顶部添加还是末尾添加 position: 'bottom', // 新增一行的方式，默认是缓存，取消后就会消失 // 如果设置为 dataSource 会触发 onchange，取消后也不会消失，只能删除 newRecordType: 'dataSource', // 不写 key ，会使用 index 当行 id record: {}, // 设置按钮文案 creatorButtonText: '新增一行', // 按钮的样式设置，可以设置按钮是否显示 // 这样可以做最大行限制和最小行限制之类的功能 style: { display: 'none', }, // https://ant.design/components/button-cn/#API ...antButtonProps, };
2.editable：可编辑表格的相关配置，在官网写的已经超详细了，以下就是官网解释及我的理解：
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| type | 可编辑表格的类型，单行编辑或者多行编辑 | single | multiple | - |
| form | 可编辑表格的 form 实例，使用 | FormInstance | - |
| formProps | 可以配置 form 的属性，但是不支持 onFinish | FormProps | - |
| editableKeys | 正在编辑的行，受控属性。 默认 可以与下面的onChange合并使用，在onChange的时候更改key即可 | Key[] | - |
| onChange | 行数据被修改的时候触发。 可以与editableKeys合并使用，更改key | (editableKeys: Key[], editableRows: T[]) => void | - |
| onSave | 保存一行的时候触发。 这里可以拿到row数据，进行数据的提交等操作 | (key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any> | - |
| saveText | 保存一行的文字 | React.ReactNode | 保存 |
| onDelete | 删除一行的时候触发 | (key: Key, row: T) => Promise<any> | - |
| deleteText | 删除一行的文字 | React.ReactNode | 删除 |
| onCancel | 取消编辑一行时触发 最终需要返回一个promise | (key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any> | - |
| cancelText | 取消编辑一行的文字 | React.ReactNode | 取消 |
| actionRender | 自定义编辑模式的操作栏。 第三个参数是默认按钮defaultDom，默认有保存（defaultDom.save），取消（defaultDom.cancel），删除（defaultDom.delete）按钮，可以自行配置 | (row: T, config: ActionRenderConfig<T>) => ReactNode[] | - |
| deletePopconfirmMessage | 删除时弹出的确认框提示消息 | ReactNode | 删除此行？ |
| onlyOneLineEditor AlertMessage | 只能编辑一行的的提示 | ReactNode | 只能同时编辑一行 |
| onlyAddOneLine AlertMessage | 只能同时新增一行的提示 | ReactNode | 只能新增一行 |
3.除了EditableProTable中的这些属性外，columns中有需要注意的就是：
- valueType：通过设置valueType类型：valueType: 'select',或者valueType: 'date',等来设置表单项类型，这一点和ProTable是相通的；
- formItemProps：通过formItemProps可以快速便捷地对于表单项进行配置，如添加校验，设置占位字符等。
formItemProps: () => { return { rules: [{ required: true, message: '请输入地址名称' }], }; },
小结
大概要注意的也就以上了吧，但还是建议在充分理解了ProTable之后，再使用EditableProTable会比较顺畅，不然会被很多东西卡住......如果对于本文或者相关用法还有什么疑问的话，也请让我知道吧，互相学习嘛~