Ant design - 如何通过拖动来调整表格列宽？

Question

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

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

请帮忙，谢谢！

---

更新 @ 2018-11-13

现在有一个调整表列大小的官方示例：

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));
      }
    }
  };
}