antd的table组件设置Column的width列宽度不生效问题

Posted bescheiden

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd的table组件设置Column的width列宽度不生效问题相关的知识,希望对你有一定的参考价值。

超长连续字段(长数字和长单词) 破坏表格布局的问题(即使你指定了列的宽度也会被挤开),之前组件内默认加过 word-break: break-word; 去纠正此类布局,又会引起其他的问题。

所以最好的解决方案可能还是不默认 break word,提供一个属性来针对某些列进行断行处理。

columns={[
  ...
  textWrap: 'word-break',
]}

还可以支持

columns={[
  ...
  ellipsis: true,
]}

注意,在 3.24.0 之前,你需要针对超长字段的列增加折断样式:

columns={[
  ...
  render: (text, record) => (
    <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
      {text}
    </div>
  ),
]}

已经在 3.24.0 里解决了超长字段破坏列对齐的问题,并增加了省略功能

以上是关于antd的table组件设置Column的width列宽度不生效问题的主要内容,如果未能解决你的问题,请参考以下文章

antd vue table 设置rowClassName不生效的问题

antd组件table选中行(单行/多行)高亮显示

ant-design Table组件错位/对不齐

antd Upload组件 onChange接收不到后续状态的问题

antd - react table表格需要展示合计行

antd-design实例详解a-table 中column中slot-scope=“{text, record, index}