一 使用editableProTable表头筛选，无法重置
解决思路：
1.使用ref.current.reloadAndRest()，去重置整个表单，不起作用！！！
2.通过查看antd table文档发现可以通过table的onchange事件去获取filters的值，并在colums中配置filteredValue。示例：https://ant.design/components/table-cn#components-table-demo-reset-filter。
但是editableProTable的onchange事件为了方便使用 EditableProTable 增加了一些预设，关掉了查询表单和操作栏，同时修改了 value 和 onChange 使其可以方便的继承到 antd 的 Form 中。在onchange事件中无法拿到filters，导致无法手动清除。！！！
3. 考虑给table假一个key值，通过key值的变化，是整个table重新渲染。成功清除！！！
代码如下：
const [uuid, setUuid] = useState(UUID())
// 重置
const reset = () => {
setUuid(UUID())
actionRef.current.reloadAndRest()
}
<EditableProTable<Member>
key={uuid}
rowKey="id"
......
/>
驻：UUID（）是一个随机生成一段字符串的方法
const UUID = function (type?: string): string {
const value = create(type)
const id = value.replace(/-/g, '')
return id
}
二。proTable的跨页面勾选
问题：在当前页面的列表勾选一条数据，点击翻页，在翻页后的列表勾选数据，会导致之前勾选的数据自动取消，只勾选当前数据。
解决思路：数据勾选涉及到selectedRowKeys，针对这个字段做处理
1.useState设置selectedRows和selectedRowKeys
const [selectedRows, setSelectedRows] = useState<Member[]>([]) // 多选对象集合
const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]) // 多选的key值集合
2.在onSelect事件中对selectedRowKeys和selectedRows做处理。onSelectAll全选事件，同样如此。
/**
* rowSelection onSelect 记录所有 selectedRowKeys / selectedRows
* @param record 当前勾选的数据
* @param selected 当前操作是勾选（true）还是取消勾选（false）
* @param selectedRowKeys 之前已经被勾选的数据
* @param rowKey 处理的字段，方便定位到对象中的字段
* @returns selectedRowKeys
*/
const getOnRowSelectedKeys = <T>(record: T, selected: boolean, selectedRowKeys: Key[], rowKey: Key): Key[] => {
const iRowKey = (record as any)[rowKey]
if (selected) {
return [...selectedRowKeys, iRowKey]
}
return selectedRowKeys.filter((k: Key) => k !== iRowKey)
}
const getOnRowSelected = <T>(record: T, selected: boolean, selectedRows: T[]): T[] => {
if (selected) {
return [...selectedRows, record]
}
return selectedRows.filter((d: T) => !_.isEqual(d, record))
}
3.在proTable中配置rowSelection，代码如下：
rowSelection={{
selectedRowKeys,
onSelect: (record: Member, selected: boolean) => {
setSelectedRowKeys(getOnRowSelectedKeys<Member>(record, selected, selectedRowKeys, 'id'))
setSelectedRows(getOnRowSelected<Member>(record, selected, selectedRows))
},
onSelectAll: (selected: boolean, selectedRowsEx: Member[], changeRows: Member[]) => {
setSelectedRowKeys(getOnRowSelectedKeysAll<Member>(selected, changeRows, selectedRowKeys, 'id'))
setSelectedRows(getOnRowSelectedAll<Member>(selected, changeRows, selectedRows))
},
}}
4. 如果需要清除勾选项，clearSelected会失效，需要手动清除
// 刷新列表
const reloadList = () => {
actionRef.current.reload()
actionRef.current.clearSelected()
setSelectedRowKeys([])
setSelectedRows([])
}
三。删除操作。
删除当前页面的最后一项
删除后导致列表空白
问题：我们执行删除操作，只会刷新当前列表，当我们删除当前列表的最后一项时，只刷新列表会导致列表处于空白，不会自动跳转到前一页。
解决思路：对删除操作进行一个判断。判断当前删除的数量是否大于等于当前页面的totals。如果是，就重置列表，不是，就刷新列表。代码如下：
const handleDelete = (_record: any, type: string) => {
Modal.confirm({
title: intled('请注意'),
content: intled('是否删除') + '?',
okText: intled('确认'),
cancelText: intled('取消'),
onOk: async () => {
let query = {
ids: type === 'single' ? [_record.id] : selectedRowKeys,
}
const { code, message: msg } = await userFileDelete(query)
if (code === 0) {
if (query.ids.length >= totals) {
actionRef.current.reloadAndRest()
} else {
reloadList()
}
messageApi.success(msg)
} else {
messageApi.error(msg)
}
},
})
}
四。在proTable中翻页后，在其中一条数据点击详情发生跳转，点击返回后直接返回到列表第一页，不会返回到跳转前的页。
解决思路：