el-table-column数据过长多行省略处理
发表于:2022-12-29 | 分类: 前端
字数统计: 217 | 阅读时长: 1分钟 | 阅读量:

场景:在使用 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;
    }
上一篇:
flex布局space-between最后一行展示问题
下一篇:
echarts鼠标首次悬浮经过页面闪动