[ant-design]【Table】对部分column设置width和ellipsis属性后,会导致未设置width属性的表格列样式宽度丢失

2024-07-05 573 views
2

https://stackblitz.com/edit/react-lytf2m?file=demo.tsx

https://github.com/ant-design/ant-design/assets/103547464/11987e1a-2951-4736-a898-e47034e50096

  1. 定义表格column,保留一个column项不设置width属性,其余均设置width属性,此时通过拖动窗口,改变窗口大小,表格显示正常
  2. 给任务一个column项设置ellipsis属性,此时未设置width属性的column项,宽度丢失

表格列显示正常

Environment Info
antd 5.9.4
React 18.2.0
System macos
Browser chrome116

回答

4

没看出异常的点在哪?能详细描述一下预期效果和现在效果的差异点么?

4

该问题主要出现在width属性和ellipsis结合使用的时候发生的。视频中的例子除了Address列,其余列均设置width=100,Table表格的呈现存在三种结果:

  1. 所有字段都未设置ellipsis属性,此时所有表格列均可以显示,在调整窗口过程中,Adrress列也可以正常显示

    image image
  2. 给任意一个非Address列设置一个ellipsis属性,此时调整窗口后发现,Address列表表头消失,Address列内容显示宽度已经丢失了

    image image
  3. 给Address列设置ellipsis属性,其它列随意,此时调整窗口发现,Address列宽度丢失,表头和内容全部消息

    image image
2

预期结果是width和ellipsis结合使用时,对未设置width属性的表格列可以正常显示

3

刚才试了一下,这个问题从5.x版本之后,就一直存在,希望能尽快解决一下。

4

@afc163 这个问题还有人在跟吗

6

欢迎 PR,不过问题 3 我不确定怎样是符合预期的行为,Address 开启省略的话,没空间的时候消失看上去也是合理的。