antd 的ProTable 的列加上ellipsis属性后,react-resizable会无法拖动列

1、我尝试在列中加入ellipsis为true后,让内容超出后,用省略号表示。

 {title:displayName,dataIndex:propName,key:newPropName,width:widthIndex
        //,ellipsis:true
      }

 

但是这引发了另外的问题。react-resizable 配置的列可拖动无效了。

额外的情况:obj.fixed = 'left'   让列固定,这是可以出现省略号和可以拖动的。

 

2、chartGpt给出的解决办法:

ellipsis 属性通常用于在内容溢出时显示省略号。但是,它可能会与某些 UI 库或组件产生冲突,因为它会影响到元素的布局和大小计算。

在你描述的情况下,使用 ellipsis 属性可能导致 react-resizable 无法正确地识别和操作表格列的大小,因为它可能会影响到列的宽度计算。

为了解决这个问题,你可以考虑以下几种方法:

  1. 不使用 ellipsis 属性: 如果可能的话,尝试不使用 ellipsis 属性,或者通过其他方式处理文本溢出,例如使用 Tooltip 或者自定义样式来处理长文本的显示。

  2. 自定义处理: 如果你确实需要 ellipsis 属性,那么你可能需要自定义处理 react-resizable 的拖动逻辑。这可能涉及到修改 react-resizable 的源代码,或者在使用时进行一些 hack 或调整以兼容 ellipsis 属性。

  3. 反馈给组件作者: 如果 ellipsis 属性与 react-resizable 组件的正常功能产生了冲突,你可以将这个问题反馈给组件的作者,看是否可以在未来的版本中解决这个问题。

综上所述,你可以根据具体情况选择合适的解决方案来解决 ellipsis 属性与 react-resizable 组件之间的冲突。

 

posted @ 2024-04-16 09:33  信铁寒胜  阅读(291)  评论(0编辑  收藏  举报