elementUI表格内容根据高度来判断是否显示气泡，表格单元格显示原始格式（换行、空格）

最新推荐文章于 2024-09-06 10:39:45 发布

原创

最新推荐文章于 2024-09-06 10:39:45 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何在ElementUI的表格中优化气泡显示，实现行固定高度时超出部分以气泡形式展现，同时保留原始格式。通过监听鼠标进入事件，计算内容真实高度与显示高度对比，决定是否显示气泡。

elementUI底层只做了根据根据表格中单元格的宽度来控制是否显示气泡，加一个show-overflow-tooltip属性，当内容超出就显示气泡。传统的，如果我们要自定义一个气泡，这时候可能不太好精确的判断什么时候就内容超出了设置的minWidth，就显示气泡。
现在有一个需求，可以实现表格行固定高度，当超出高度，就显示气泡；并且气泡、单元格要保留原始格式。（出现气泡的方法，也适用于自定义气泡，超出宽度，恰到好处的显示气泡。）
先看一下效果图：
在这里插入图片描述

实现的代码：
结构部分：

<div style="margin:20px 0;">根据高度显示气泡，表格单元格显示原始格式</div>
    <el-table
      class="testHeightTip"
      :data="tableData"
      @cell-mouse-enter="handleCellMouseEnter"
      style="width: 100%" border>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="序号"
                       align="center"
                       fixed="left"
                       width="64">
        <template slot-scope="scope">
          <span>{
   
   {
   
   scope.$index  }}</span>
        </template>
      </el-table-column>
      <el-t