antd 的table支持拖宽列通过tsx实现

Ant Design (antd) 是一套基于 React 的开源 UI 组件库，它提供了一个强大的数据表格组件 `Table`，支持丰富的功能，包括但不限于列拖拽调整宽度。要在 TypeScript 中实现拖动列宽的功能，你可以按照以下步骤操作：

1. 首先，确保已经安装了 `antd` 和相关的 TypeScript 支持包，如 `@types/react` 和 `@types/ant-design`。

2. 使用 `Table` 组件，并设置它的属性 `columns` 为一个数组，每个列都包含 ` dataIndex`、`title` 等基本属性，以及一个可选的 `width` 属性用于初始宽度。

import { Table } from 'antd';
import { ColumnProps } from 'antd/es/table';

interface MyColumn extends ColumnProps {
  width?: number | string;
}

const columns: Array<MyColumn> = [
  // ...
];

// 可能还需要一个 state 来保存列宽的新值
const [columnWidths, setColumnWidths] = useState<{ [key: string]: number }>({});

// 拖动事件处理函数
const handleDragEnd = (e: any) => {
  const { originalEvent } = e;
  const targetHeader = originalEvent.target as HTMLElement;
  const newWidth = targetHeader.clientWidth;
  const columnName = targetHeader.getAttribute('data-index'); // 获取列名
  setColumnWidths((prev) => ({ ...prev, [columnName]: newWidth }));
};

// 使用 column.width 的新值渲染 Table
<Table columns={columns.map(column => ({
  ...column,
  onCell: (record: any, index: number, props: any) => ({
    ...props,
    style: { width: `${columnWidths[props.columnKey] || 'auto'}px` },
  }),
  onHeaderCell: ({ key }) => ({
    ...({ draggable: true, onDragEnd }, key === 'index'), // 仅允许某些列拖拽
    style: { width: `${columnWidths[key] || 'auto'}px` },
    title: (
      <div>
        {/* 标题内容 */}
        <span className="drag-handle" draggable="true" onDragEnd={handleDragEnd}>
          <i className="anticon anticon-columns"></i>
        </span>
      </div>
    ),
  }),
} ))}