二次封装antd的ProTable、EditableProTable，结合use-antd-resizable-header，做一个列可伸缩的表格组件

原先是一个项目模块内需求，迭代的时候领导要求项目全面翻新，所有表格都要可伸缩列

如果一个一个页面写伸缩列的话，每个页面都要引用一次use-antd-resizable-header，有点累赘

找了网上，暂时没看见这个有人整理这个组件。

直接上代码

import ProTable from "@ant-design/pro-table";
import { Tooltip } from "antd";
import { connect } from "dva";
import React, { useMemo } from "react";
import { useAntdResizableHeader } from "use-antd-resizable-header";


export interface DragTableProps {
  tableProps: any // 表格属性
  active?: Boolean // 是否动态列
  rbac?: any // 权限
  tableHeght?: number // 表格高度，针对一些弹窗表格
}

const DragTable: React.FC<DragTableProps> = props => {
  const {
    tableProps,
    active,
    rbac,
    tableHeght
  } = props

  const { columns, ...rest } = tableProps

  const { components: proComponents, resizableColumns: proResizableColumns, tableWidth: proTableWidth, resetColumns: proResetColumns } = useAntdResizableHeader({
    columns: active ? useMemo(() => columns, [rbac, columns]) : useMemo(() => columns, [rbac]),
    tooltipRender: (props) => <Tooltip {...props} />,
    maxConstraints: 400
  })

  return (
    <>
      <ProTable
        bordered
        columns={proResizableColumns}
        components={proComponents}
        scroll={{
          x: proTableWidth,
          y: tableHeght ? tableHeght : null
        }}
        options={{
          density: false,
          fullScreen: false,
          reload: false,
          setting: true
        }}
        {...rest}
      />
    </>
  )
}

export default connect(() => ({}))(DragTable);

因为我们项目内有动态列的需求，如果你没有这一块需求，可以把active相关代码去掉

ProTable里面比较固定的属性可以直接写在组件里面，这样就不用每一次引用组件都写了

在页面上使用组件

import DragTable from '@/pages/components/DragTable'

<DragTable
  tableProps={{
  headerTitle: "对码",
  rowKey: "id",
  size: "small",
  actionRef: actionRef,
  dataSource: dataList,
  columns: columns,
  loading: loading,
  onSubmit: (params: any) => getMatchingCodesData(params),
  onReset: () => { resetBtn() },
  search: false,
  rowSelection: {
    selectedRowKeys: id,
    onChange: handleRowSelectionChange
  },
  toolBarRender: () => [],
  pagination: {
    current: queryParam.page,
    pageSize: queryParam.size,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: [15, 30, 50, 100],
    size: 'small',
    onChange: getMatchingCodesData,
    showTotal: () => `共 ${total || 0} 条`,
    total: total
  }
 }}
/>

相关的属性参数都可以按照自己的需求来

这里提一嘴，经过尝试，EditableProTable也可以调用这个组件，不需要重新写一个，因为EditableProTable和ProTable虽然标签不一样，但是里面的属性大部分都是一样的，EditableProTable的api也可以在ProTable标签里面使用，只要调用DragTable的时候加上EditableProTable相关的编辑api就行了。