溪客(编程代码)

添加包

yarn add use-antd-resizable-header

引用全局less

global.less

@import '~use-antd-resizable-header/dist/style.css';

创建组件

src/components/ProTableEx/index.tsx

import React, { useMemo } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import type { ParamsType } from '@ant-design/pro-provider';
import type { ProTableProps } from '@ant-design/pro-table/lib/typing';
import { type ResizableColumnsType, useAntdResizableHeader } from 'use-antd-resizable-header'
type Columns = ResizableColumnsType<ProColumns[]>


export type ProTableExProps = ProTableProps<Record<string, any>, ParamsType> & {
};

const ProTableEx: React.FC<ProTableExProps> = (props) => {

    const { components, resizableColumns, tableWidth, resetColumns, refresh } = useAntdResizableHeader({
        columns: useMemo(() => props.columns, []),
    });

    return <>
        <ProTable<Record<string, any>>
            // headerTitle="查询表格"
            {...props}
            scroll={{ x: tableWidth }}
            columns={resizableColumns}
            components={components}
        />
    </>
};
export default ProTableEx;

使用组件

替换原来的ProTable

import ProTableEx from "@/components/ProTableEx";

// 替换为ProTableEx
<ProTableEx
  // headerTitle="查询表格"
  headerTitle={<>
  </>}
  actionRef={actionRef}
  rowKey="id"
  search={{
    labelWidth: 120,
    // filterType: 'light'
  }}
  toolBarRender={(params) => [
    <>
      <Button title='导出excel' shape="round" icon={<DownloadOutlined />} onClick={() => handelClickExportFile(params)} >导出excel</Button>
    </>
  ]}
  request={async (params, sorter, filter) => {
    // 表单搜索项会从 params 传入，传递给后端接口。
    console.log(params, sorter, filter);
    var res = await GetOrderListByStore({
      storeId: storeId,
      pageIndex: params.current,
      appFlag: queryParams.appFlag,
      ...(params || {})
    })
    Exportparams = params;

    return {
      data: res.content?.items,
      success: res.success,
      total: res.content?.totalCount
    }
  }}
  //不再需要
  //scroll={{ x: tableWidth }}
  columns={columns}
/>