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