element table组件实现show-overflow-tooltip效果，解决一些自带show-overflow-tooltip不能实现的效果。

有时候根据ui需求，element table组件的show-overflow-tooltip并不能完成我们想要的效果，这是后只能自己二次封装

<!-- <TooltipVue :message="scope.row.address"></TooltipVue> -->
<template>
  <div>
    <el-tooltip :disabled="isShowTooltip" class="tooltip" placement="top">
      <pre class="tooltip__tip" slot="content">{{ messageWord }}</pre>
      <div class="tooltip__words" @mouseenter="enterEvents">{{ messageWord }}</div>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  data() {
    return {
      messageWord: "",
      isShowTooltip: false,
    };
  },
  props: {
    message: {
      required: true,
    },
  },
  mounted() {
    this.messageWord = this.message;
  },
  methods: {
    enterEvents(e) {
      let tableContentBoxWidth = e.target.getBoundingClientRect().width;
      let tableContentWidth = this.getElementTextWidth(e.target);
      if (tableContentWidth >= tableContentBoxWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },
    getElementTextWidth(el) {
      const range = new Range();
      range.selectNodeContents(el);
      const width = range.getBoundingClientRect().width;
      return width;
    },
  },
};
</script>
<style lang="scss" scoped>
.tooltip__words {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tooltip__tip {
  max-width: 416px;
  max-height: 156px;
  overflow-y: auto;
  white-space: pre-line;
}

.tooltip__tip::-webkit-scrollbar {
  width: 6px;
}

.tooltip__tip::-webkit-scrollbar-thumb {
  background: #ccc; // 滑块颜色
  border-radius: 3px; // 滑块圆角
}

.tooltip__tip::-webkit-scrollbar-thumb:hover {
  background: #fff; // 鼠标移入滑块颜色
}

.tooltip__tip::-webkit-scrollbar-track {
  border-radius: 3px; // 轨道圆角
  background-color: #888; // 轨道颜色 ;
}
</style>