el-table的show-overflow-tooltip内容过多，自定义样式

吉士粉狗

已于 2023-04-02 12:42:18 修改

阅读量2.4k

点赞数 2

文章标签： css html 前端 vue.js elementui

于 2023-03-17 09:46:53 首次发布

本文链接：https://blog.csdn.net/qq_35516011/article/details/129612054

版权

该文章展示了如何用el-popover组件替换show-overflow-tooltip功能，特别是在el-table-column中处理分享内容的展示。通过设置特定的CSS样式，如width、overflow和text-overflow，实现了多行文本的截断并提供了一个可展开的popover来完整显示内容。

摘要由CSDN通过智能技术生成

使用el-popover替换show-overflow-tooltip，以下是代码和样式：

<el-table-column prop="shareContent" label="分享内容" width="500" style="cursor: pointer">
  <template slot-scope="scope">
    <el-popover placement="bottom" trigger="hover">
      <template>
        <div class="set-popper">{{scope.row.shareContent | contentFilter}}</div>
      </template>
      <div slot="reference" class="set-content">
        <span>{{scope.row.shareContent | contentFilter}}</span>
      </div>
    </el-popover>
  </template>
</el-table-column>

.set-popper {
  width:500px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 12;
  -webkit-box-orient: vertical;
}
.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}