[ant-design]动态ToolTip，table列表根据文字宽度表格宽度动态显示，附代码

需求背景:在table列表中ant-design的tooltip需要根据文字多少来动态显示/隐藏，不会超出的不显示tooltip

www.baidu.com文字不超出，鼠标移入不显示tooltip 

---

组件代码

<script>
import {
  defineComponent,
  getCurrentInstance,
  nextTick,
  ref
} from 'vue';

export default defineComponent({
  props: {
    text: {
      default: ''
    }
  },
  setup() {
    const showTooltip = ref(false);
    const textRef = ref();
    const { proxy } = getCurrentInstance();

    const setTooltip = () => {
      nextTick(() => {
        const outElWidth = proxy.$el && proxy.$el.offsetWidth;
        const textElWidth = textRef.value && textRef.value.offsetWidth;

        if (outElWidth < textElWidth) {
          showTooltip.value = true;
        } else {
          showTooltip.value = false;
        }
      });
    };

    const resize = () => {
      setTooltip();
    };

    return {
      textRef,
      showTooltip,
      setTooltip,
      resize
    };
  },
  render() {
    return (
      <div vResize={this.resize}>
        {this.showTooltip ? (
          <ATooltip placement="top" arrowPointAtCenter={true}>
            {{
              title: () => <span>{this.text}</span>,
              default: () => (
                <div class="out">
                  <span ref="textRef" class="text">
                    {this.text}
                  </span>
                </div>
              )
            }}
          </ATooltip>
        ) : (
          <div class="out">
            <span ref="textRef" class="text">
              {this.text}
            </span>
          </div>
        )}
      </div>
    );
  }
});
</script>
<style scoped lang="less">
.out {
  word-break: break-word;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 18px;
}
</style>

  app.directive("resize", {
    mounted(el: HTMLElement | any, binding: any): void {
      let width = "",
        height = "";
      function isReize() {
        const defaultView: any = document.defaultView;
        const style = defaultView.getComputedStyle(el);
        if (width !== style.width || height !== style.height) {
          binding.value();
        }
        width = style.width;
        height = style.height;
      }
      el.__vueSetInterval__ = setInterval(isReize, 300);
    },
    unmounted(el: HTMLElement | any) {
      clearInterval(el.__vueSetInterval__);
    },
  });

Table里使用

        <template #bodyCell="{ column, record, text }">
            <TooltipCell :text="text" />
        </template>