antd pro table 拖动列宽

Ant Design Pro是一个企业级中后台前端/设计解决方案，它基于Ant Design和Umi构建。在Ant Design Pro的Table组件中，可以通过配置属性来实现列宽的拖动调整功能，提供用户友好的交互体验。

要实现拖动列宽的功能，你需要确保Table组件中启用了相关属性。通常，这个功能可以通过设置`draggable`属性为`true`来开启。当该属性被激活后，用户可以通过鼠标点击列的标题区域并拖动来调整列宽。此外，`columnResizable`属性也可以用来控制是否允许调整列宽。

下面是一个简单的示例代码，展示如何在Ant Design Pro的Table组件中启用拖动列宽：

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

const MyTable = () => {
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    // ... 其他列配置
  ];

  const data = [
    // ... 数据源
  ];

  return (
    <Table
      columns={columns}
      dataSource={data}
      draggable // 启用列拖动功能
      columnResizable // 启用列宽调整功能
    />
  );
};

export default MyTable;

通过上述的代码配置，用户就能够通过拖动列标题来调整每列的宽度了。