Ant Pro的組件ProTable安利

爲何要使用

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組件,能夠大大提升列表的開發效率。

相關文章
相關標籤/搜索