Ant design - 如何通过拖动调整table列宽？

Question

有没有办法让用户通过拖放来调整 Ant Design Table 的列宽？

我发现了一些关于列排序的示例，而不是调整列大小的示例。

请帮忙，谢谢！

---

更新 @ 2018-11-13

现在有一个调整table列大小的官方例子：

https://ant.design/components/table/#components-table-demo-resizable-column

Answer 1

我制作了一个工作示例 - 它远非完美，需要大量优化。基本上您需要使用 onHeaderCell 并捕获 onMouseDown、onMouseUp 和 onMouseMove.

onMouseMove 我们调用 setState 并基本上使用新的列宽触发重新渲染。

https://codesandbox.io/s/j2zw9nn5w9

onHeaderCell: column => {
  let colw = this.state.columnWidth;
  return {
    onMouseDown: e => {
      this.mouseDownX = e.clientX;
      this.beginDrag = true;
    },
    onMouseUp: () => {
      this.beginDrag = false;
    },
    onMouseMove: e => {
      if(this.beginDrag === true) {
        this.updateColumnWidth(colw + 
        Math.round((e.clientX - this.mouseDownX)*.05));
      }
    }
  };
}