Ant Design Pro項目ProTable怎麼獲取搜索表單值

前情

---

公司有經常需要做一些後臺管理頁面，我們選擇了Ant Design Pro，它是基於 Ant Design 和 umi 的封裝的一整套企業級中後臺前端/設計解決方案。

產品效果圖

---

最新接到的一個後臺管理界面需求，如下圖。需要實現數據導出功能，ProTable搜索欄默認有重置和查詢按鈕，所以需要增加一個導出按鈕，那導出的條件是依賴搜索條件的，不像查詢按鈕本身就會觸發request方法，裏面可以拿到搜索表單的值。

解決方案

方式1：使用useRef，通過ProTable的fromRef獲取表單對象，再通過表單對象下的getFieldsValue獲取所有表單值，也可以以通過getFieldValue(key)獲取單個表單值

---

關鍵代碼：

---

const proTableFormRef = useRef<ProFormInstance>();
const exportBookingData = () => {
    const formFieldsValue = proTableFormRef.getFieldsValue();
		// 這裏可以查到當前搜索表單的值
    console.log('---- exportBookingData ----:', formFieldsValue );
		// 接接參數，發起請求
		...
  };

...

<ProTable
  size="middle"
  rowKey="id"
  columns={columns}
  formRef={proTableFormRef}
  actionRef={actionFormRef}
  options={{ reload: false, density: false, fullScreen: true }}
  search={{
    labelWidth: 'auto',
    optionRender: ({ searchText, resetText }, { form }) => {
      return [
        <Button
          key="reset"
          style={{ marginRight: '10px' }}
          onClick={() => {
            actionFormRef?.current?.reset();
          }}
        >
          {resetText}
        </Button>,
        <Button key="search" type="primary" htmlType="submit" style={{ marginRight: '10px' }}>
          {searchText}
        </Button>,
        <Button
          key="export"
          loading={isExportIng}
          type="primary"
          onClick={exportBookingData}
        >
          導出
        </Button>,
      ];
    },
  }}
  pagination={{
    size: 'default',
    defaultPageSize: 10,
    showTotal: (total) => `共 ${total} 條`,
  }}
  request={requestBookingDataList}
/>

方式2：在通過search下的optionRender方法自定導出按鈕的時候，它的第二個參數可以查到當前搜索表單對象，可以把此表單對象直接傳給導出事件綁定的方法，再通過表單對象下的getFieldsValue獲取所有表單值，也可以以通過getFieldValue(key)獲取單個表單值

關鍵代碼:

const exportBookingData = (form) => {
    const formFieldsValue = form.getFieldsValue();
		// 這裏可以查到當前搜索表單的值
    console.log('---- exportBookingData ----:', formFieldsValue );
		// 接接參數，發起請求
		...
  };

...

<ProTable
  size="middle"
  rowKey="id"
  columns={columns}
  formRef={proTableFormRef}
  actionRef={actionFormRef}
  options={{ reload: false, density: false, fullScreen: true }}
  search={{
    labelWidth: 'auto',
    optionRender: ({ searchText, resetText }, { form }) => {
      return [
        <Button
          key="reset"
          style={{ marginRight: '10px' }}
          onClick={() => {
            actionFormRef?.current?.reset();
          }}
        >
          {resetText}
        </Button>,
        <Button key="search" type="primary" htmlType="submit" style={{ marginRight: '10px' }}>
          {searchText}
        </Button>,
        <Button
          key="export"
          loading={isExportIng}
          type="primary"
          onClick={() => exportBookingData(form)}
        >
          導出
        </Button>,
      ];
    },
  }
  pagination={{
    size: 'default',
    defaultPageSize: 10,
    showTotal: (total) => `共 ${total} 條`,
  }}
  request={requestBookingDataList}
/>

• 注：二種方式都可以完成此需求，從使用方便考慮，推薦第二種

思考

定義一個標誌變量，標示當前是查詢還是導出，在導出的時候主動觸發查詢方法，在查詢方法裏

拿到表單值，再把當前的表單值用於導出請求，方法千千W，你是否有更好的方式推薦了？期待你的分享。