el-table设置多行显示省略号

liluo_1227

于 2021-07-23 16:25:01 发布

阅读量2.6k

点赞数 4

文章标签： html5 javascript vue.js

本文链接：https://blog.csdn.net/liluo_1227/article/details/119038642

版权

本文介绍如何利用el-tooltip和CSS技巧实现超出指定行数显示省略号的效果，通过`-webkit-line-clamp`属性控制显示行数，结合el-tooltip组件提供详细代码示例，适用于前端开发中表格列数据的展示优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

show-overflow-tooltip自带属性是超出一行显示省略号，如果不满足要求需要自己修改的话可以借助插槽和el-tooltip去实现

 <el-table-column width :label="$t('用户角色')" prop="roleNameList">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" :content="row.roleNameList" placement="top">
              <div
                style="width:100%;padding: 0px;display: -webkit-box;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;white-space: normal;line-height:18px;"
              >{{row.roleNameList}}</div>
            </el-tooltip>
              </template>
            </el-table-column>

-webkit-line-clamp:行数;修改行数可以实现超出你想要的行数显示省略号