表格的换行与不换行

最后更新于:2022-04-02 07:15:15

# 表格的换行与不换行 [TOC] ## 一、强制表格所有列不换行 > 此功能可以强制表格所有列不换行,过长会显示滚动条 ### 弊端提醒 ``` * 1.会导致fixed属性失效,无法固定列。 * 2.会导致列宽属性 width失效。 ``` ### 引入样式 首先必须引用以下样式代码 ``` import '@/assets/less/TableExpand.less' ``` ### Table添加class 仅需在 `a-table` 上添加一个 class 样式即可 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/04/7e/047ed88cb7b769354ce8aebe316bf577_447x50.png) ``` class="j-table-force-nowrap" ``` ### 添加前效果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/80/69/8069ae63475b561f33dce674663ac819_927x300.png) ### 添加后效果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/4a/e4/4ae41878f6227e075d44dae370fbea26_971x603.png) ## 二、强制表格不换行后,如何固定列和设置width呢? > 20200506升级,代码生成器改造点: > 1. 列表默认加上 class="j-table-force-nowrap",强制列表不换行 > 2. 取消了操作列的默认固定(为了更好的移动自适应) > 如果需要固定操作列,参考此文档 需在 `a-table` 上添加一个 属性 :scroll="{x:true}" 即可 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/93/ef/93effb9d7960d18066a6721be3127e26_644x233.png) 需在 `column` 上添加一个 属性 fixed:"right", 同时最好指定宽度 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/ab/5f/ab5f896f3fcaadf8f52f47e21a9017bb_570x443.png) 如果需要固定选择框,则加上属性 `,fixed: true` ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/68/e1/68e104f155c311d104dabaf5b64ce77e_875x380.png) 此时给非固定列字段加width也生效。 ## 三、如何删除强制不换行样式,切换至原始写法 删除样式引入 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/d3/f4/d3f414e8936549dab5814c30bf091309_575x160.png) 删除样式属性 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/a9/d6/a9d685a130f9893c546461d68af87750_729x305.png) ## 常见问题解答 ### 1. 操作列太窄,导致删除提示框变形 解决方案 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/d7/61/d76176ca851bbb3b47c56b06743c2f88_762x354.png) 修改后的代码 ``` ``` 改之前效果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/80/6f/806f2b0528d7d67ae278b3bc0cf50826_645x411.png) 改之后的效果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2b/f8/2bf8c1f77414049206c5ebc015fefbdb_499x266.png)
';