When the table component displays data, after adding attributes to cells with too long text show-overflow-tootip, the width of the tooltip will fill the screen.
From the DOM node, it can be seen that when the mouse enters the cell affected by the show-overflow-tooltip attribute, the body will be displayed One more node with a class el-tooltip__popperof , this node is the real tooltip DOM
It seems that a very intuitive optimization is to directly restyle the el-tooltip__popper, like this:
<style>
.el-tooltip__popper {
width: 250px;
}
</style>
Note: This style override must be modified by setting a global style. If you add a style to a component, you cannot use the scoped attribute
The disadvantage of the above method is obvious, it will cause global style pollution. In the source code of the table component, you table-body.jscan find that the implementation of showOverflowTooltip also uses the tooltip component of element ui
So, turn off showOverflowTooltip here, use slotto rewrite the cell content, and use our own defined tooltip style, like this:
<el-table-column prop="address" label="地址" width="300">
<template slot-scope="{ row }">
<el-tooltip class="item" effect="dark" placement="top-start">
<div class="tooltip-content" slot="content">{
{ row.address }}</div>
<div class="tooltip-trigger">{
{ row.address }}</div>
</el-tooltip>
</template>
</el-table-column>
And you only need to modify the style of the tooltip prompt content in the component
<style scoped>
.tooltip-content {
width: 250px;
}
.tooltip-trigger {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
And this method also has disadvantages, each cell will have tooltip logic, instead of displaying after the text exceeds the clipping, then select it as needed