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