# 表格的換行與不換行 [TOC] ## 必備代碼 若要使用該功能，必須引用以下代碼 ``` import '@/assets/less/TableExpand.less' ```  ## 一、強制表格所有列不換行 僅需在 `a-table` 上添加一個 class 樣式即可（弊端： 會導致列設置寬度失效）  ``` class="j-table-force-nowrap" ``` ### 添加前效果  ### 添加后效果  ## 二、單個列強制不換行 給需要不換行的的列上加上以下代碼 ``` js customRender: (text) => (<span class="j-force-nowrap">{text}</span>) ```  也可以寫一個公共的方法，統一調用 ``` js const forceNowrap = (text) => (<span class="j-force-nowrap">{text}</span>) ```   如果設置了 slot，可以在slot里加上class，比如  ## 三、強制表格換行 僅需在 `a-table` 上添加一個 class 樣式即可  ``` class="j-table-force-wrap" ``` ### 添加前效果  ### 添加后效果  ## 四、固定操作列或者其他列字段 > 20200427 平臺升級，代碼生成器改造點： > 1. 默認加上 class="j-table-force-nowrap"，強制列表不換行 > 2. 取消了操作列的默認固定（目的是為了更好的移動自適應效果），如果需要固定操作列，參考此文檔。 需在 `a-table` 上添加一個 屬性 :scroll="{x:true}" 即可  需在 `column` 上添加一個 屬性 fixed:"right", 同時最好指定寬度  選擇框列固定在左邊，加上屬性 `,fixed: true`  ## 五、如何刪除強制不換行樣式，切換至原始寫法 刪除樣式引入  刪除樣式屬性  ## 常見問題解答 ### 強制換行樣式不生效？ 為什么即使加上了 `j-table-force-wrap` 樣式后也沒有換行？ * `原因`： 達不到換行要求 因為沒有設置列的寬度，所以默認是自適應的寬度，當程序認為有足夠的寬度可以顯示的時候，就不會換行了。  * `解決方法`：主動給要換行或者內容可能很長的列設置寬度  * `效果`：  代碼備份 ``` /** [表格主題樣式二] 表格強制英文換行 */ .j-table-force-wrap { th { white-space: nowrap; } td { white-space: normal; word-wrap: break-word; word-break: break-all; } } /** 單列或文本強制不換行 */ .j-force-nowrap { white-space: nowrap; } ```