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