el-toolTip文字超出显示，未超出隐藏

封装组件components/ToolTips.vue

<template>

  <el-tooltip ref="tooltipsRef" :disabled="disabled" :content="text">

    <slot></slot>

  </el-tooltip>

</template>

<script>

export default {

  props: ["text", "width"],

  data() {

    return {

      disabled: false

    };

  },

  created() {},

  mounted() {

    let elm = this.$refs.tooltipsRef.$slots.default[0].elm;

    console.log(this.$refs.tooltipsRef.tooltipId);

    if (!this.text) {

      throw new Error("文本内容为空");

    }

    if (!elm) {

      throw new Error("子节点必须是一个dom元素");

    }

    elm.style.width = this.width + "px";

    elm.style.display = "block";

    elm.style.whiteSpace = "nowrap";

    elm.style.textOverflow = "ellipsis";

    elm.style.overflow = "hidden";

    this.disabled = elm.clientWidth >= elm.scrollWidth;

  }

};

</script>

<style>

.el-tooltip__popper.is-dark {

  width: 500px !important;

}

</style>

<style scoped>

</style>

使用

 <div v-for="item in list" :key="item">

       <tool-tips :text="item" :width="500">

          <div>{{item}}</div>

       </tool-tips>

   </div>