When the vUE item-el-table cell contains too many contents, the ellipsis is displayed

Solution: When the el-table cell contains too much content, the ellipsis is displayed. When the mouse hover, the entire content is displayed

In the VUE project, use the el-Table component. Because the cell content is too much. It’s going to stretch the cell. As shown in figure:

Ii. Solutions (two kinds)

1. The first option

• Add tooltip effect=”dark” or tooltip effect=”light” to el-table
• Add the code show-overflow-tooltip to el-table-column

// Set the tooltip-effect property in el-table
<el-table
    :data="resultData"
    border
    tooltip-effect="dark"
    style="width:100%"
>

// Set the show-overflow-tooltip property on el-table-column
<el-table-column 
    prop="PrjName"
    label="Name of project applied by the Enterprise"
    width="70"
    show-overflow-tooltip
>
</el-table-column>

Copy the code

2. The second option

• Add code directly above el-table-column :show-overflow-tooltip=”true”

<el-table-column 
    prop="PrjName" 
    label="Name of project applied by the Enterprise" 
    width="70" 
    :show-overflow-tooltip="true"
>
</el-table-column>

Copy the code