ProTable 在 antd 的 table 上進行了一層封裝,支持了一些預設,而且封裝了一些行爲,理論上你只要有配置列columns 和 request 屬性,就能夠生成一個全功能的表格,完成增刪改查,分頁查詢,刷新,列屬性修改等功能,能夠大大提升表格的功能的開發效率。具體樣式以下:(此處使用ProTable版本:2.4.2): ajax
經過 column 的配置自動生成的(第一張圖紅色區域),默認會把columns下的全部項都列爲查詢項目,配置request後,會自動處理查詢數據,並請求接口。
markdown
1.request配置以下:antd
<ProTable
headerTitle="查詢表格"
columns={columns}
request={(params) => queryTableData(params)}
/>
複製代碼
注:params中參數爲:{current: 1,pageSzie: 20},根據業務接口須要,能夠對params進行擴展便可。
app
2.queryTableData返回的數據格式應爲:async
{
data: [],
total: 100,
pageSize: 20,
current: 2,
}
複製代碼
3.如不須要columns中的項出如今查詢項中,只需在columns配置hideInSearch:true便可。ide
const columns = [
{
title: '描述',
dataIndex: 'desc',
hideInSearch: true,
}
複製代碼
4.若是不須要查詢功能,配置以下:工具
<ProTable
search={false}
/>
複製代碼
5.對search內容塊修改成默認展開狀態並去掉"收起"選項post
<ProTable
search={{
collapsed: false,
collapseRender:() => null
}}
/>
複製代碼
6.對查詢項進行類型設置,可在columns配置valueType,如須要某個查詢項以日期和時間形式展現:fetch
const columns = [{
title: '上次調度時間',
dataIndex: 'updatedAt',
valueType: 'dateTime'
}]
複製代碼
注:valueType支持的類型有: 7.查詢項爲枚舉值時,可在columns配置valueEnum,如:ui
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組件,能夠大大提升列表的開發效率。