When using ElementUI to display table data in a Vue project, if a column value is longer than the column width, it is wrapped by default, making the display unfriendly.
Browsing through the element-UI documentation, you can see that the show-overflow-tooltip column property displays tooltip when the column content is too long and hidden.
Note: The show-overflow-tooltip attribute must be used with caution. If multiple columns are used on a page, the page loading speed will be affected. Because the show-overflow-tooltip attribute, while it solves the problem of excessively long text, is currently implemented simply by inserting toolTip component wrappers in all cells.
The Tooltip component multiplies the DOM structure and has at least two listening events inside each tooltip. This performance is conceivable for large tables. Therefore, the table display of a large amount of data in the background system needs to be optimized and improved.
demo
<el-table-column :show-overflow-tooltip="true" prop="EMAIL" label=" EMAIL" > </el-table-column>Copy the code