el-table-column的label换行
时间: 2023-04-29 11:03:07 浏览: 1227
可以使用`<br>`标签或者CSS样式中的`white-space: pre-wrap`来实现`el-table-column`的label换行。具体方法如下:
1. 使用`<br>`标签
在`el-table-column`的`label`属性中,可以使用`<br>`标签来实现换行,例如:
```html
<el-table-column prop="name" label="姓名<br>(英文名)"></el-table-column>
```
2. 使用CSS样式
在`el-table-column`的`label`属性中,可以使用CSS样式来实现换行,例如:
```html
<el-table-column prop="name" :label-style="{ whiteSpace: 'pre-wrap' }" label="姓名(英文名)"></el-table-column>
```
其中,`:label-style`属性用来设置`label`的CSS样式,`white-space: pre-wrap`表示保留空格和换行符,并自动换行。
注意:使用CSS样式时,需要在`el-table-column`的父元素中设置`white-space: nowrap`,以避免表格列宽度自适应导致换行失效。例如:
```html
<el-table :data="tableData" style="white-space: nowrap;">
<el-table-column prop="name" :label-style="{ whiteSpace: 'pre-wrap' }" label="姓名(英文名)"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)