element-ui Tooltip，文本有省略号hover时显示

1、封装引用

有省略号就显示，无省略号就不显示

<template>
  <div class="tooltipBox" :class="boxClassName">
    <el-tooltip
      :content="content"
      :disabled="tooltipIsShow"
      placement="top"
      popper-class="table-body-tooltip">
      <div
        ref="elipsisDom"
        class="text-ellipsis"
        @mouseenter="tooltipIsDisHandler($event)">
        {{ content || '--' }}
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'LKtooltip',

  props: {
    content: {
      type: String,
      default: ''
    },
    index: {
      type: String,
      default: null
    },
    boxClassName: {
      type: String,
      default: 'tooltipBox2'
    }
  },

  data() {
    return {
      tooltipIsShow: false // 是否展示tooltip
    };
  },

  methods: {
    tooltipIsDisHandler(ev) {
      if (ev.target.clientWidth < ev.target.scrollWidth) {
        this.tooltipIsShow = false;
      } else {
        this.tooltipIsShow = true;
      }
    }
  }
};
</script>

<style lang='scss' scoped>
  .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

2、引用

<LKtooltip :content="item.custName"> </LKtooltip>

3、全局引用或者局部引用

全局引用

局部引用需要在组件中用import 引入，在components中注册