antd table拖动列宽完整代码

Ant Design（antd）是一个基于React的UI组件库，提供了包括Table在内的多种组件，用于构建用户界面。antd的Table组件支持拖动列宽的功能，使用户可以根据个人喜好调整每列的宽度。

以下是一个使用React和antd实现可拖动列宽的Table组件的示例代码：

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

const DragableTable = () => {
  // 定义列配置
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      // 可拖动配置
      dragabble: true,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width: 150,
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      width: 200,
      // 可拖动配置
      dragabble: true,
    },
  ];

  // 定义数据
  const data = [
    {
      key: '1',
      name: '王小虎',
      age: 32,
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      key: '2',
      name: '张小刚',
      age: 28,
      address: '上海市普陀区金沙江路 1517 弄',
    },
    // ...更多数据项
  ];

  // 设置拖动状态
  const [draggingKey, setDraggingKey] = useState('');

  // 处理拖动开始事件
  const handleDragStart = (record) => {
    setDraggingKey(record.key);
  };

  // 处理拖动结束事件
  const handleDragEnd = () => {
    setDraggingKey('');
  };

  // 定制列渲染函数，以支持拖动
  const components = {
    body: {
      cell: DragableCell,
    },
  };

  return (
    <Table
      columns={columns}
      dataSource={data}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      components={components}
    />
  );
};

// 拖动列的单元格组件
const DragableCell = (props) => {
  // ...省略了具体的实现细节
  // 这里需要使用React的ref和onDrag事件来实现列的拖动效果
};

export default DragableTable;

在上述代码中，我们通过设置`dragabble: true`属性使列支持拖动。`DragableCell`是一个需要自定义的单元格组件，用于处理拖动逻辑，例如捕获拖动事件，更新列宽等。由于具体实现细节较为复杂，这里没有给出完整的`DragableCell`组件代码。

需要注意的是，从antd v4版本开始，`dragabble`属性已经被弃用，而应该使用`dragable`属性。