ant-design table实现可伸缩列 （神坑：4.17.1版本文档没有可伸缩列）

记录一个antd神坑问题：

博主想要实现一个列表的可伸缩列

但是

antd4.x的官方文档并没有相关demo文档记录

经过一番排查发现

antd3.x是有可伸缩列这一项的demo的

地址是：https://ant.design/components/table-cn/#components-table-demo-resizable-column

神奇的是

当我用该地址切换4.x，4.x出现了可伸缩列这一个demo
而当我去掉url的#components-table-demo-resizable-column后，该demo又消失了。。。

可伸缩列示例

（1）组件A

import { Resizable } from 'react-resizable';

// 第三方列拖拽组件的必须配置,传递给proTable的components属性API嵌入
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 StrgyAllCanalLiftExcludeZH extends Component {
  constructor(props) {
    super(props);
    this.state = {
      str: '',
      usrId: '',
      orgId: '',
      curMonth: [
        moment().subtract(2, 'd').startOf('month'),
        moment().subtract(2, 'd')
      ],
      data: [],
      total: 0,
      loading: false,
      btnLoading: false,
      cacheQuery: {},
      cachePagi: {
        current: _PAGE_NUM,
        pageSize: _PAGE_SIZE,
      },
      statisticsData: {
        basic: {},
        suc: {},
      },
      columns: colFunc(),
    };
   }
  }
  // 第三方列拖拽组件的必须配置,传递给proTable的components属性API嵌入
  components = { header: { cell: ResizeableTitle, }, };

// 处理Table的columns各个属性的width自适应 为第三方列拖拽组件必须回调
  handleResize = (index, colName = 'columns') => (e, { size }) => {
    this.setState((preState) => {
      const columns = preState[colName];
      const nextColumns = [...columns];
      nextColumns[index] = { ...nextColumns[index], width: size.width, };
      return { [colName]: nextColumns };
    });
  };
// ...省略以下部分无关代码

render() {
    const { str, usrId, orgId, data, statisticsData, total, loading, columns, btnLoading } = this.state;
    const cols = (columns || []).map((col, index) => ({ ...col, onHeaderCell: column => ({ width: column.width, onResize: this.handleResize(index), }), }));

    return (
      <div style={{ width: '100%', height: '100%', float: 'left' }}>
        <ProTable
          columns={cols}
          data={data}
          total={total}
          rowKey="uniKey"
          components={this.components}
          loading={loading}
          btnLoading={btnLoading}
          onParentTableChange={this.onParentTableChange}
          getDetailAndStatis={this.getDetailAndStatis}
          expReport={this.expReport}
          parentQuery={this.getTableData}
          defineConfig={qqdtsdConfig(statisticsData)}
          isShort={true}
          formDom="StrgyAllCanalLiftExcludeZHForm"
          title="(新)策略_全渠道(除招乎)提升度报表"
        >
        </ProTable>
      </div>
    );
  }
}

（2）ProTable组件的render内

{/* id="components-table-demo-resizable-column" 该属性是引入第三方拖拽列组件 必须指定容器ID */}
      <div id="components-table-demo-resizable-column" className={`${styles.searchBlock} ${styles.fullScreen}`} style={{ marginTop: 20 }}>
        <div className={styles.tagAndExport}>
          {/* 报表明细/报表统计标签 空div占位使用，不能去掉 */}
          {hasConfigOrTable ? <CustomTagSwitch tabLName={tabLName} tabRName={tabRName} currKey={currKey} onTagClick={onTagClick} /> : <div></div>}
          {/* 导出按钮 默认第一个tag必定显示导出 isShowExportKey=1 表示第二个tag也要显示导出 */}
          <Button
            icon={< img src={EXPORT_IMG} className={styles.img} />}
            className={styles.exportBtn}
            style={{ display: isShowExportKey === 1 || currKey === 0 ? 'block' : 'none', marginBottom: hasConfigOrTable ? 0 : 15 }}
            loading={btnLoading}
            disabled={btnDisable}
            onClick={exportReport}
          >
            &nbsp;导出
          </Button>
        </div>
        {/* 列表区域 */}
        <Table
          style={{ display: currKey === 0 ? 'block' : 'none' }}
          currKey={currKey}
          dataSource={data}
          components={components}
          columns={props.columns}
          rowKey={props.rowKey || 'id'}
          loading={loading}
          size="small"
          rowClassName={(record, idx) => idx % 2 === 0 ? styles.dftBg : styles.newBg}
          scroll={{ x: 'max-content', y: TABLE_SCROLL_Y }}
          pagination={_pagination}
          onChange={onTableChange}
        />
        {/* 另外一个tag的内容区域 这边是通过隐藏table 显示另一个tag区域的内容 特指类似 招乎提升度报表的[报表统计] */}
        {
          currKey === 1 && defineConfig && <ProDefineDom
            style={{ display: currKey === 1 ? 'block' : 'none' }}
            sucStyle={sucStyle}
            isShort={isShort}
            defineConfig={defineConfig}
          />
        }
        {/* 另外一个tag的内容区域 这边是通过隐藏table 显示另一个tag区域的内容 特指类似 客户经理报表的[报表小计] */}
        {
          currKey === 1 && DefineTable && <DefineTable currKey={currKey} style={{ display: currKey === 1 ? 'block' : 'none' }} />
        }
      </div>