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 里解決了超長字段破壞列對齊的問題,並增加了省略功能


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM