为什么要使用
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组件,可以大大提高列表的开发效率。