1. el-table table
When using VUE to display background data, we often encounter data that is too long and the displayed effect is ugly, as shown in the following figure:
In the picture above, the content in the red box is too long and occupies three rows of space. If there is more content, it will occupy more rows. If there are too many columns in the table, the effect will be ugly. .
In order to solve the above problem, we can use an attribute provided by the <el-table-column> component: show-overflow-tooltip='true' to add this attribute, which will hide the excessively long content and display it when the mouse is hovering. When above the content, all data will be displayed in the form of a floating box. The code is as follows:
<el-table-column
label="DeviceId"
prop="deviceId"
:show-overflow-tooltip='true'>
</el-table-column>Results as shown below:
From the effect in the picture above, it can be seen that when the framed content is displayed, its overly long part is replaced by an ellipsis..., and when the mouse is placed on the content, all data, including hidden data, is in the form of a floating box. display.
This method not only makes the page beautiful, but also achieves the purpose of data display. It can be used when the front-end uses tables to display data.
However, this method has a big drawback, that is, the data displayed on mouse hover cannot be copied. In order to solve this problem, you can use the Popover pop-up box component in the form.
2. Popover pop-up box
In element-ui, the table uses the Popover pop-up box component code as follows:
<!-- <el-table-column label="DeviceId" prop="deviceId" :show-overflow-tooltip='true'></el-table-column> -->
<el-table-column label="deviceId" prop="deviceId">
<template slot-scope='scope'>
<el-popover
placement="top-start"
width="400"
trigger="hover">
<span>{
{scope.row.deviceId}}</span>
<span slot="reference">{
{scope.row.deviceId.substr(1,20) + '...'}}</span>
</el-popover>
</template>
</el-table-column>The final effect is as follows:
As can be seen from the picture above, using the Popover pop-up box component, we not only display all the content in the floating box when the mouse points to the content, the mouse can also go to the floating box and copy the content you want.