antd table 拖动列宽

Ant Design（antd）是一个企业级的UI设计语言和React实现。antd的Table组件提供了丰富的功能，其中包括列宽的调整。要实现拖动列宽的功能，你可以在Table组件中使用`onColResize`事件，并结合`Column`组件的`width`属性或者`minWidth`、`maxWidth`属性来控制列宽。以下是一个简单的使用示例：

import React, { useState } from 'react';
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: 200,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: 100,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: 200,
    onHeaderCell: column => ({
      width: column.width,
      minWidth: column.minWidth,
      maxWidth: column.maxWidth,
    }),
  },
];

const DragabbleTable = () => {
  const [data] = useState([
    // ... 数据源
  ]);

  return (
    <Table
      columns={columns}
      dataSource={data}
      onColResize={(newWidth, index) => {
        console.log(`Column ${index} width changed to ${newWidth}px`);
        // 这里可以根据index来更新列宽状态，但antd已经内置处理了拖动列宽变化
      }}
      components={{
        body: {
          cell: props => <div {...props} className="cell-draggable" />,
        },
      }}
      // 其他配置...
    />
  );
};

export default DragabbleTable;

在这个例子中，`onColResize`事件被用来获取新的列宽，并打印出来。`Column`的`onHeaderCell`属性可以用来设置可拖动的列头单元格的样式。通过设置`minWidth`和`maxWidth`，你可以限制用户调整列宽的最小和最大值。

请注意，antd已经内置了列宽拖动的交互，通常不需要额外处理，除非你有特殊的定制需求。