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

使用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;
}

最终显示效果:

el-table的show-overflow-tooltip内容过多,自定义样式_第1张图片

你可能感兴趣的:(css,html,前端,vue.js,elementui)