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

Posted 2023-05-08

【中文标题】Ant design - 如何通过拖动调整表格列宽？

【英文标题】：Ant design - How to adjust table column width by dragging?

【发布时间】：2018-11-29 02:42:42

【问题描述】：

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

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

请帮忙，谢谢！

---

于 2018 年 11 月 13 日更新

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

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

【问题讨论】：

没有内置功能，你可以看看拖拽排序功能并实现这个 -ant.design/components/table/#components-table-demo-drag-sorting

@AseemGautam 感谢您的建议。其实我现在正在尝试基于这个例子来实现这个功能。但是我仍然无法弄清楚解决方案。

我认为您可以使用onHeaderCell 和codepen.io/graham_saunders/pen/vrDxf 示例来使其工作

【参考方案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));
      
    
  ;

【讨论】：

感谢@Aseem Gautam！虽然codesandbox.io/s/j2zw9nn5w9 不能用作 gif，但它确实帮助我实现了该功能！ :)

哎呀，抱歉，代码似乎没有保存。我刚刚再次更新，沙盒现在可以正常工作了。它的行为与 gif 中的一样。

感谢您的帮助！真的很感激！ :)

对我来说，沙箱 codesandbox.io/s/j2zw9nn5w9 仍然无法正常工作。它给出了错误。

删除第87行的<Icon type="down" />就行了