文字超出一行及多行省略展示，同时鼠标移入el-tooltip文字提示

文字超出一行及多行省略展示，同时鼠标移入el-tooltip文字提示，文字没有超过不会显示文字提示

组件

<template>
  <el-tooltip
    class="item"
    :effect="effect"
    :disabled="!isShowTooltip"
    popper-class="table-tooltip"
    :content="rowContent"
    :placement="placement"
  >
    <span
      class="overflow-tow"
      :style="{'--retain-rows': retainRows }"
      @mouseenter="visibilityChange($event)"
    >{{ rowContent }}</span>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    effect: {
      type: String,
      default: 'light',
    },
    placement: {
      type: String,
      default: 'top-start',
    },
    // 内容
    rowContent: {
      type: String,
      default: '',
    },
    // 超出几行省略
    retainRows: {
      type: [String, Number],
      default: 1,
    },
  },
  data() {
    return {
      isShowTooltip: false,
    };
  },
  methods: {
    visibilityChange(event) {
      const ev = event.target;
      const evWeight = ev.scrollHeight;
      const contentWeight = ev.clientHeight;
      if (evWeight > contentWeight) {
        // 实际高度 > 可视高度  文字溢出
        this.isShowTooltip = true;
      } else {
        // 否则为不溢出
        this.isShowTooltip = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.overflow-tow {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--retain-rows);
}
</style>
<style>
.table-tooltip {
  max-width: 400px;
}
</style>

引用

  <table-list
        style="margin-top: 10px"
        :table-data="tableData"
        :table-label="tableLabel"
        :index-show="true"
        :fixed-index="'left'"
        :max-height="'500'"
      >
        <template #description="{ scope }">
          <table-tooltip :row-content="scope.row.materialLongDescription" />
        </template>
        <template #remark="{ scope }">
          <table-tooltip :row-content="scope.row.remark" />
        </template>
      </table-list>