为什么要使用
ProTable 在 antd 的 table 上进行了一层封装，支持了一些预设，并且封装了一些行为，理论上你只要有配置列columns 和 request 属性，就可以生成一个全功能的表格，完成增删改查,分页查询，刷新，列属性修改等功能，可以大大提高表格的功能的开发效率。具体样式如下：（此处使用ProTable版本：2.4.2）：
查询功能
通过 column 的配置自动生成的（第一张图红色区域），默认会把columns下的所有项都列为查询项目,配置request后，会自动处理查询数据，并请求接口。
1.request配置如下:
<ProTable
headerTitle="查询表格"
columns={columns}
request={(params) => queryTableData(params)}
/>
注：params中参数为:{current: 1,pageSzie: 20},根据业务接口需要，可以对params进行扩展即可。
2.queryTableData返回的数据格式应为:
{
data: [],
total: 100,
pageSize: 20,
current: 2,
}
3.如不需要columns中的项出现在查询项中，只需在columns配置hideInSearch：true即可。
const columns = [
{
title: '描述',
dataIndex: 'desc',
hideInSearch: true,
}
4.如果不需要查询功能，配置如下：
<ProTable
search={false}
/>
5.对search内容块修改为默认展开状态并去掉"收起"选项
<ProTable
search={{
collapsed: false,
collapseRender:() => null
}}
/>
6.对查询项进行类型设置，可在columns配置valueType，如需要某个查询项以日期和时间形式展示：
const columns = [{ title: '上次调度时间', dataIndex: 'updatedAt', valueType: 'dateTime' }]
注：valueType支持的类型有：
7.查询项为枚举值时，可在columns配置valueEnum，如：
const columns = [{
title: '状态',
dataIndex: 'status',
valueEnum: {
0: {
text: '关闭',
status: 'Default',
},
1: {
text: '运行中',
status: 'Processing',
},
2: {
text: '已上线',
status: 'Success',
},
3: {
text: '异常',
status: 'Error',
},
},
}]
8.valueType和valueEnum基本已经可以满足绝大部分需求了，如果对查询项还有别的需求，还可以通过renderFormItem自定义。
const columns = [{
{
title: 'ID',
dataIndex: 'id',
hideInTable: true,
order: 3,
renderFormItem: (item, { defaultRender, ...rest }, form) => {
return (<Select
showSearch
placeholder="请选择"
style={{ minWidth: 200 }}
optionFilterProp="children"
virtual={false}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{businessOptions.map(d => (
<Option value={d.id} key={d.id}>{d.name}</Option>
))}
</Select>)
},
},
}]
以上通过renderFormItem渲染出带搜索的下拉选择（valueEnum能实现下拉，但不支持搜索）。
表格的工具栏
1.toolBarRender 用来设置工具栏的按钮及其事件。
2.工具栏最右边的 4 个图标(密度, 全屏, 刷新, 列设置), 可以设置 table 的显示方式, 可以通过 options 来配置其是否显示。
表格内容
1.通过request，配置对应的ajax请求，即可获取到数据，方法见文章开头查询功能（request配置）。
2.actionRef，操作表单的预设方法，包括：刷新、重置所有项并刷新、重置到默认项、加载更多、清空选中项。
const actionRef = useRef();
// 刷新
actionRef.current.reload();
// 重置所有项并刷新
actionRef.current.reloadAndRest();
// 加载更多
actionRef.current.fetchMore();
// 重置到默认值
actionRef.current.reset();
// 清空选中项
current.clearSelected();
<ProTable
search={{
collapsed: false,
collapseRender:() => null
actionRef={actionRef}
}}
/>
4.postData,对通过 url 获取的数据在渲染到表格前进行处理，比如筛选掉无效数据。
5.实现表格列内容超出隐藏，配置ellipsis进行自动缩略，但遗憾的时，并没有生效，属于bug。对比Table组件发现，在Table中配置ellipsis会自动将tableLayout设置为"fixed",但是在ProTable不会，因此需要手动给ProTable加上属性tableLayout="fixed",虽然功能实现了，但是展示会有问题，tips错位的问题。
注：以上问题改配置无法解决，而且在ProTable最新版（2.6.2）中这个问题依然存在，只好在columns通过render方法自己实现了，代码如下：
const Ellipsis = (text) => {
return (<Tooltip placement="topLeft" title={text}><span
style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%', display: 'inline-block' }}>
{text}
</span></Tooltip>)
}
const columns = [
{
title: '名称',
dataIndex: 'name',
valueType: 'text',
render: (text, record) => (
<>
{Ellipsis(text)}
</>
),
}]
效果如下：
分页功能
默认带分页，如需要更改，可参考ant的Table组件API即可。
表单功能
ProTable还可以实现表单的功能，这是Table组件所不具备的，使用起来非常方便，可以实现表单项配置化。
const columns = [ { title: '规则名称', dataIndex: 'name', rules: [ { required: true, message: '规则名称为必填项', }, ],
labelCol:{ span: 4},
wrapperCol:{ span: 10 }
},
{
title: '描述',
dataIndex: 'desc',
valueType: 'textarea',
labelCol:{ span: 4 },
wrapperCol:{ span: 10}
}]
<div style={{width: 600}}>
<ProTable
onSubmit={async value => {
console.log(value, 'value');
}}
type="form"
columns={columns}
/>
</div>
通过以上配置，便实现了表单的展示，校验，表单数据获取的功能，比直接使用表单Form组件要方便的多。
另外，还支持表单透传，如下：通过formItemProps配置表单disabled属性
const columns = [ { title: '规则名称', dataIndex: 'name', rules: [ { required: true, message: '规则名称为必填项', }, ],
labelCol:{ span: 4},
wrapperCol:{ span: 10 },
formItemProps: {
disabled: true,
onChange: () => console.log('onChange'),
},
},
{
title: '描述',
dataIndex: 'desc',
valueType: 'textarea',
labelCol:{ span: 4 },
wrapperCol:{ span: 10}
}]
总结
综合上述，ProTable确实是一个十分好用的table组件，可以大大提高列表的开发效率。
