在el-table中使用el-tooltip时，文本超出tooltip文字提示显示，否则隐藏

背景

在后台日常开发中，发现当项目中表格某一单元格内容过多时，会导致当前行的高度过高，使布局显得很不美观。

所以需要实现鼠标移入显示tooltip的需求，并且是当文本内容超出时才会显示，否则是不会显示的。

实现

方法一：在 el-table-column 标签上使用 show-overflow-tooltip 属性实现

通过设置 show-overflow-tooltip 这个属性可以达成超出一行的文字用省略号替代，并带有鼠标移入时内容超出时tooltip会显示，内容没有超出时不显示tooltip的需求。

缺点： 只能超出一行时使用，想要文本超出多行的需求，设置这个属性是无法完成的。并且也无法复制tooltip上的内容，因为鼠标只要移除单元格tooltip就会隐藏

方法二：通过文本宽度进行判断

<template>
  <el-table :data="roleList">
    <el-table-column prop="id" label="ID" width="100" />
    <el-table-column prop="remark" label="备注">
      <template #default="scope">
        <el-tooltip :content="scope.row.remark" placement="top" :disabled="isHide">
          <span class="cellContentTwo" @mouseover="isShowTooltip(scope.row.remark, $event)">
            {{ scope.row.remark }}
          </span>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      roleList: [
        {
          id: 1,
          remark:
            '超级管理员拥有最高权限超级管理员拥有最高权限超级管理员拥有最高权限超级管理员拥有最高权限超级管理员拥有最高权限超级管理员拥有最高权限超级管理员拥有最高权限超级管理员拥有最高权限超级管理员拥有最高权限超级管理员拥有最高权限超级管理员拥有最高权限超级管理员拥有最高权限超级超级管理员拥有最高权限超级超级管理员拥有最高权限超级超级超级 最高权限超级超级管理员拥有最高权限超级超级超级'
        },
        {
          id: 2,
          remark: '普通角色拥有部分权限'
        }
      ],
      isHide: true
    }
  },
  methods: {
    isShowTooltip(val, e) {
      // 创建一个临时dom，需为行内盒子或者行内块盒子，让宽度适应内容
      const creatDom = document.createElement('span')
      creatDom.innerText = val
      // 强制一行显示，并且字体大小要与表格单元格字体大小一致，方便计算宽度
      creatDom.style.whiteSpace = 'pre'
      creatDom.style.fontSize = '14px'
      document.body.appendChild(creatDom)
      const width = creatDom.offsetWidth
      creatDom.remove()

      // 判断文本长度是否大于表格单元格宽度。乘于2，表示两行
      if (width >= e.target.offsetWidth * 2) {
        this.isHide = false
      } else {
        this.isHide = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 文本超出两行显示省略号
.cellContentTwo {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>