element表格超出提示toast

<template>
  <div class="text-tooltip">
    <el-tooltip
      class="item"
      effect="dark"
      :disabled="isShowTooltip"
      placement="top"
    >
      <div slot="content">{{ content | stringFilter }}</div>
      <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)">
        <span :ref="refName" class="txt">{{ content || '-' }}</span>
      </p>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  props: {
    content: {
      type: String,
      default: () => {
        return ''
      },
    },
    className: {
      type: String,
      default: () => {
        return ''
      },
    },
    refName: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return {
      isShowTooltip: true,
    }
  },
  filters: {
    stringFilter(str) {
      return [undefined, null, ' '].includes(str) ? '--' : str
    },
  },
  methods: {
    onMouseOver(str) {
      let parentHeight = this.$refs[str].parentNode.offsetHeight
      let contentHeight = this.$refs[str].offsetHeight
      if (contentHeight > parentHeight) {
        this.isShowTooltip = false
      } else {
        this.isShowTooltip = true
      }
    },
  },
}
</script>
<style lang="scss">
@mixin xxl-ellipsis-two {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  word-break: break-word;
}
@mixin xxl-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.over-flow {
  @include xxl-ellipsis-two;
}
.width {
  width: 100%;
}
p {
  margin: 0;
}
</style>