Antd Table 表格 拖拽列宽

antd 的表格组件的列宽，是通过width属性去初始化的，有时候渲染的内容不固定，这个宽做不到通用所以研究怎么实现表格列宽拖动，主要的实现步骤如下：

1. 使用table的components API修改表格头部为 react-resizable提供的组件
2. 并在columns设置侦听函数，用于动态修改宽度 （onHeaderCell API）
3. 还需要设置css，让控制组件显示在正确位置

在实际的应用中，Table组件直接再次封装为可以拖动的组件供所有人使用，而且拖动后的布局是可以本地存储的，或者用接口去存也是一样，实现效果如下

下面是实现的具体代码，封装了一个MyTable 组件，在这个组件中可以自定义antd Table组件的交互样式等

1、安装插件

npm install react-resizable

2、写MyTable组件

目录结构

这里使用了.tsx 来写，里面的校验随便写的 方便大家看，同文件夹下的ResizableTitle.tsx 文件就是自定义的表头，通过antd Table组件的components重写表格，每次拖动中不断更新表格的布局不断渲染，看起来就是一个连续的过程

// Mytable/index.tsx
import {
   
    Table } from 'antd';
import {
   
    useState } from 'react';

import ResizableTitle from './ResizableTitle'
import './index.css'

export default function MyTable(){
   
   
  const [columns, setColumns] = useState([
    {
   
   
      title: 'Date',
      dataIndex: 'date',
      width: 200,
    },
    {
   
   
      title: 'Amount',
      dataIndex: 'amount',
      width: 100,
      sorter: (a, b) => a.amount - b.amount,
    },
    {
   
   
      title: 'Type',
      dataIndex: 'type',
      width: 100,
    },
    {
   
   
      title: 'Note',
      dataIndex: 'note',
      width: 100,
    },
    {
   
   
      title: 'Action',
      key: 'action',
      render: () => <a>Delete</a>,
    },
  ]);

  const dataSource = [
    {
   
   
      key: 0,
      date: '2018-02-11',
      amount: 120,
      type: 'income',
      note: 'transfer'