On the mobile side, when using the elementUI table for data display, sometimes there is some not very critical information, and you don't want to occupy a lot of board information.
You can add min-width="120" :show-overflow-tooltip="true"
for control
<el-table-column prop="id" label="订单号" align="center" width="140"
min-width="120" :show-overflow-tooltip="true">
</el-table-column>
This will omit long information
1. After clicking, the omitted information will be displayed. If you want to modify the size of the displayed information
2. Open the developer tool and check that the class is el-tooltip__popper
3. And find that el-tooltip__popper is located outside the global app
Method 1 (recommended) modify the style in the vue file using el-table
First of all, why it is recommended to modify in the local vue file, because I may have introduced the el-tooltip prompt component in multiple vue files, but the requirement style of el-tooltip in each vue file is not the same, so it is more recommended in local modification style
How to modify: Because the el-tooltip__popper of element is located outside the global app, when modifying the style of the local vue file, scoped modification cannot be used, but what if my other style styles need to be modified with scoped, it is very simple, then Write two style tags , one with scoped modification and the other without scoped modification (modify the style of el-tooltip__popper inside)
The specific code is as follows
<style>
/* 文字过长省略 弹窗的样式 */
/* **************************不加scoped因为 .el-tooltip标签不在这个vue中 */
.el-tooltip__popper{
font-size: 4vw;
line-height: 1.5;
}
</style>
<style scoped lang="less">
.home{
width: 100%;
height: 100%;
}
//省略。。。。。。。。。。
</style>
Method 2 (not recommended) to modify the style globally
Modify the style of the class directly in the App.vue file, and
add the following in the style tag of App.vue
/* 移动端 el-table表格字体省略 点击显示后的样式 */
.el-tooltip__popper{
font-size: 3.6vw;
line-height: 1.5;
}
display effect
