场景:在使用 el-table 时会遇到表格某行数据过长的情况
- 一般的处理方式是直接使用 el-table-column 的 show-overflow-tooltip 来省略过长的内容
- 还有一种是特殊需求:需要 多行展示后 再进行省略显示。 以下是处理方式:
1
2
3
4
5
6
7
8<el-table-column
property="Date"
label="Date">
// 这里 template 的作用是 模拟 tooltip 的作用
<template v-slot="scope">
<div :title="scope.row.Date" v-html="scope.row.Date" class="title-tips"></div>
</template>
</el-table-column>1
2
3
4
5
6
7
8
9/deep/ .el-table .cell {
word-break: break-word ; // 避免一个单词被换行断开为两部分
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; // 此处是2行的末尾再省略展示, 想要几行后再省略展示 就写几
max-height: 48px;
}