Hi, hello, I'm here again. Today, someone asked a question like this, that is, if in elementui , the text setting in the table overflows and displays an ellipsis in the specified row, and the mouse can see all the text, what should I do.
First of all, we know that in elementui , there is a component called 'el-table', which is a table component, web link: el-table component . This allows us to write tables more conveniently. The following el-table-column represents the column of the table, which has many attributes, such as: props, label, width... If there are many texts in this column, we do not require to display them all , you can use the show-overflow-tooltip attribute of el-table-column, so that you can overflow a line of hidden, no line break, and an ellipsis at the end.
Now the question is, if I require three lines to overflow without wrapping, and if I require five lines to overflow without wrapping, how should I set this up.
The value of the show-overflow-tooltip attribute is boolean, not numeric, and the number of rows cannot be set through this, so here we need to use another component called el-tooltip component, web link: el-tooltip component . This allows us to see all the overflowing text, combined with the scope slot, to set the style for the div, isn't it solved?
Without further ado, let's go to the code.
data() {
return {
tableData: [
{
sid: "NH12423521421526542414212412",
name: "亮亮",
performance:
"这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字",
address:
"这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字",
},
{
sid: "NH12423115265414775825812412",
name: "华华",
performance:
"这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字",
address:
"这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字",
},
{
sid: "NH12423115265414775825812412",
name: "小新",
performance:
"这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字",
address:
"这是一段虚拟文字这是段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字这是一段虚拟文字",
},
],
};
},This is the code for the table data, now write the code that will use the components mentioned above.
<el-table-column prop="address" label="具体地址" width="400">
<template slot-scope="scope">
<el-tooltip :content="scope.row.address" placement="top">
<div
style="
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
"
>
{
{ scope.row.address }}
</div>
</el-tooltip>
</template>
</el-table-column>At this time, show-overflow-tooltip will not be written, and the el-tooltip component will be directly introduced. content represents the content, and placement is the address of the prompt text. The following div sets a style for him, the overflow is hidden, and the overflow of the two lines is replaced by an ellipsis. we see the effect
Put the mouse up, there are all prompt texts, as shown in the figure
In this way, the problem is solved. If you practice more and use the components well, you will become more proficient at work. see you next time