Table拖拽调整列宽-可伸缩列

使用 react-resizable实现表格列的拖拽
拖拽表格的borer进行列宽调整
react table文档
https://github.com/react-grid-layout/react-resizable
https://blog.csdn.net/mingwei_zhu/article/details/116781122
https://codesandbox.io/s/drag-row-1fjg4?file=/index.js
https://3x.ant.design/components/table-cn/#components-table-demo-resizable-column

【注意】

• 报错依赖包报错，还需要引入react-draggable包，并重启项目
• 使用react-resizable 时必须引入其包中style.css文件，或者粘贴至自己的css中引用，否则不显示拖拽图标
• 传入的columns一定要每列都要设置列宽，设置列宽属性 width:number,不然对应列的后面不会出现拖拽标识，或者出现了，但是不可拖拽

拖拽表格样式

• 下载的包里可以找到css代码。 css需要是全局的，
• import’../node_modules/react-resizable/css/styles.css’;
• 如果是 styleComponent，要用 :global{} 包裹一下试下 ```less

// 表格拖拽样式 .react-resizable { position: relative; background-clip: padding-box; }

.react-resizable-handle { position: absolute; width: 10px; height: 100%; bottom: 0; right: -5px; cursor: col-resize; z-index: 1; }

// 禁止用户选中表头文字 tr { th { -webkit-user-select: none; user-select: none; / Chrome and Opera / } }

- 一定要针对表头文字进行禁止用户选择，不然用户按住鼠标左键从文字滑动的时候，选中了文字，
- 然后再去拖拽，会发现松了鼠标后，依然可以进行拖拽，所以禁止用户选中表头文字
<a name="VFWJS"></a>
## ResizeColumns
```jsx
import React from 'react';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
const ResizeableTitle = props => {
  const { onResize, width, ...restProps } = props;
  if (!width) {
    return <th {...restProps} />;
  }
  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};
class ResizeColumns extends React.Component {
  state = {
    columns: [
      {
        title: 'Date',
        dataIndex: 'date',
        width: 200,
      },
      {
        title: 'Amount',
        dataIndex: 'amount',
        width: 100,
      },
      {
        title: 'Type',
        dataIndex: 'type',
        width: 100,
      },
      {
        title: 'Note',
        dataIndex: 'note',
        width: 100,
      },
      {
        title: 'Action',
        key: 'action',
        render: () => <a>Delete</a>,
      },
    ],
  };
  components = {
    header: {
      cell: ResizeableTitle,
    },
  };
  data = [
    {
      key: 0,
      date: '2018-02-11',
      amount: 120,
      type: 'income',
      note: 'transfer',
    },
    {
      key: 1,
      date: '2018-03-11',
      amount: 243,
      type: 'income',
      note: 'transfer',
    },
    {
      key: 2,
      date: '2018-04-11',
      amount: 98,
      type: 'income',
      note: 'transfer',
    },
  ];
  handleResize = index => (e, { size }) => {
    this.setState(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      return { columns: nextColumns };
    });
  };
  render() {
    const columns = this.state.columns.map((col, index) => ({
      ...col,
      onHeaderCell: column => ({
        width: column.width,
        onResize: this.handleResize(index),
      }),
    }));
    return (
        <Table 
        bordered
        className='resizeTable'
        components={this.components} 
        columns={columns} 
        dataSource={this.data}
      />
    );
  }
}
export default ResizeColumns;

必须要有的样式

.resizeTable .react-resizable {
  position: relative;
  background-clip: padding-box;
}
.resizeTable .react-resizable-handle {
  position: absolute;
  width: 10px;
  height: 100%;
  bottom: 0;
  right: -5px;
  cursor: col-resize;
  z-index: 1;
}

react-resizable

react-resizable https://github.com/react-grid-layout/react-resizable
react-resizable文档 https://strml.github.io/react-resizable/examples/1.html