el-table show-overflow-tooltip设置宽度
时间: 2023-05-30 10:06:57 浏览: 3127
toolTip多行显示示例
5星 · 资源好评率100%
可以通过以下两种方法设置 `el-table` 中 `show-overflow-tooltip` 的宽度:
1. 使用 `tooltip-content` 插槽,手动控制 tooltip 内容的宽度。例如:
```html
<el-table-column label="Name" prop="name" show-overflow-tooltip>
<template slot-scope="{row}">
<div slot="tooltip-content" style="max-width: 200px">{{ row.name }}</div>
{{ row.name }}
</template>
</el-table-column>
```
在这个例子中,我们将 `tooltip-content` 插槽定义为一个 `<div>`,并设置最大宽度为 200 像素。
2. 使用 CSS 样式控制 tooltip 的宽度。例如:
```css
.el-tooltip__popper {
max-width: 200px;
}
```
在这个例子中,我们使用 CSS 样式来控制 tooltip 的最大宽度为 200 像素。请注意,这种方法会影响所有 `el-table` 中的 tooltip。如果需要对不同的 `el-table` 中的 tooltip 进行不同的宽度控制,应该使用第一种方法。
阅读全文