el-table-column el-tooltip 换行
时间: 2025-01-09 19:00:52 浏览: 101
### 解决方案
为了使 `el-table-column` 中的 `el-tooltip` 实现文本换行,可以采用关闭 `el-table` 的 `show-overflow-tooltip` 属性并添加自定义插槽的方式。通过这种方式可以在表格单元格内嵌入 `el-tooltip` 组件,并利用 CSS 控制其内部文字的行为。
在 HTML 部分,结构如下:
```html
<el-table-column :sortable="true" :label="$t('materialR.errorMsg')">
<template slot-scope="scope">
<el-tooltip placement="top-start">
<div slot="content" class="text_content"> <!-- 使用 text_content 类 -->
{{ scope.row.errMsg }}
</div>
<div style="color: #fff;" class="text_els"> <!-- 使用 text_els 类 -->
{{ scope.row.errMsg }}
</div>
</el-tooltip>
</template>
</el-table-column>
```
对于上述代码片段中的样式控制部分,则可以通过下面这段 CSS 来完成[^1]:
```css
.text_content {
display: block;
max-width: 700px; /* 设置最大宽度 */
white-space: normal !important; /* 支持自动换行 */
word-break: break-all; /* 对于长单词或 URL 地址强制断开 */
font-size: 14px;
}
.text_els {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
```
这里的关键在于 `.text_content` 和 `.text_els` 这两个类的选择器分别应用于 tooltip 提示框内的内容以及实际展示在表格列中的文本上。前者允许较长的文字正常换行显示而不被截断;后者则保持了简洁明了的一览性,在不触发提示的情况下隐藏多余的内容[^2]。
阅读全文
相关推荐



















