如果不使用`show-overflow-tooltip`属性,还能如何实现el-table表头的换行?
时间: 2024-09-10 08:21:09 浏览: 89
vue3 el-table多级表头收缩扩展的实现(JS原味版)
在不使用`show-overflow-tooltip`属性的情况下,可以通过其他方式实现`el-table`表头的换行。其中一种方法是在表头内容中直接插入`<br>`标签来实现换行。例如,如果使用的是Vue.js框架,可以在数据中提前插入换行标签,或者在模板中使用`v-html`指令来插入HTML内容,这样就可以在表头文本中实现换行。另外,也可以通过CSS样式来控制表头文本的显示,例如设置`white-space: normal;`来允许文本自动换行。
示例代码如下:
1. 在数据中直接插入换行标签(适用于静态数据):
```html
<el-table :columns="columns">
<!-- columns的定义 -->
<el-table-column prop="name" label="名称"></el-table-column>
<!-- 其他列 -->
</el-table>
```
```javascript
data() {
return {
columns: [
{
type: 'index',
label: '序号'
},
{
prop: 'name',
label: '名称<br>第二行'
},
// 其他列的定义
]
}
}
```
2. 使用`v-html`插入HTML内容(适用于动态内容):
```html
<el-table :columns="columns">
<!-- columns的定义 -->
<el-table-column prop="name" label="名称"></el-table-column>
<!-- 其他列 -->
</el-table>
```
```javascript
data() {
return {
columns: [
{
type: 'index',
label: '序号'
},
{
prop: 'name',
label: ''
},
// 其他列的定义
]
}
}
```
```html
<template slot="header" slot-scope="scope">
<div v-html="scope.column.label"></div>
</template>
```
3. 设置CSS样式实现自动换行:
```html
<el-table :columns="columns">
<!-- columns的定义 -->
<el-table-column prop="name" label="名称"></el-table-column>
<!-- 其他列 -->
</el-table>
```
```css
/deep/ .el-table__header-wrapper {
white-space: normal;
}
```
阅读全文