elementUI 根据文字长度是否超出决定是否使用el-tooltip

<div class="text-tooltip">
    <el-tooltip
        :content="content"
        :disabled="disabled"
    >
        <div
            class="over-flow"
            @mouseover="onMouseOver()">
            <span ref="tooltip">
              <slot v-bind="{ content }">
                  {{ content }}
              </slot>
            </span>
        </div>
    </<el-tooltip>
</div>
export default {
    props: {
        // 显示的文字内容 
        content: { 
            type: String, 
            default: () => { return '' } 
        },
    },
    data () {
        return {
            disabled: true
        }
    },
    methods: {
        onMouseOver(refName) {
            let parentWidth = this.$refs.tooltip.parentNode.offsetWidth;
            let contentWidth = this.$refs.tooltip.offsetWidth;
            // 判断是否开启tooltip功能
            this.disabled = contentWidth <= parentWidth;
        }
    }
}
<style scoped lang="less">
.over-flow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}
</style>

原文地址