蚂蚁设计-如何通过拖动来调整表格的列宽？

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