表格的换行与不换行
最后更新于: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)
';