elementui plus tooltip-options换行显示
时间: 2025-02-14 07:11:52 浏览: 58
### ElementUI Plus Tooltip Options 换行显示方法
为了实现 `Tooltip` 的内容换行显示,在设置 `tooltip-options` 属性时,除了指定样式外还需要考虑 HTML 内容的支持以及 CSS 控制。对于 `Element-plus` 中的 `tooltip` 组件而言,可以通过配置属性并结合自定义样式来达成这一目标。
当使用 `<el-table>` 并希望其内部的 `tooltip` 支持多行文本展示时,可以调整 `tooltip-effect` 和其他相关参数的同时引入特定类名用于控制样式[^1]:
```html
<template>
<div id="app">
<!-- 表格部分 -->
<el-table
show-overflow-tooltip
:data="tableData"
style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址">
<template slot-scope="scope">
<span class="multi-line-tooltip">{{ scope.row.address }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup>
import { ref } from 'vue';
const tableData = ref([
{
date: '2016-05-03',
name: 'Tom',
address: 'No.189, Grove St, Los Angeles No.189, Grove St, Los Angeles'
},
])
</script>
<style scoped>
.multi-line-tooltip{
white-space: pre-wrap !important;
}
</style>
```
上述代码片段展示了如何通过添加带有特殊样式的 span 来包裹需要换行的内容,并利用内联样式或外部样式表中的 `.multi-line-tooltip` 类强制文字折行。
此外需要注意的是,如果是在较新的 Vue 版本下工作,则可能涉及到事件修饰符的变化;例如在某些情况下应当采用 `.native` 修饰符以确保点击事件能够正常触发[^2]。不过这与解决 `tooltip` 文字换行无关,仅作为补充说明提供给开发者参考。
阅读全文
相关推荐

















