Vue + Element UI 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容的方法

在Vue中结合Element UI实现文本超出长度显示省略号，鼠标移上时显示全部内容，可以使用Element UI的Tooltip组件和CSS样式来实现。

首先，在Vue组件中引入Tooltip：

import { Tooltip } from 'element-ui';
 
export default {
  components: {
    'el-tooltip': Tooltip
  }
}

然后，在模板中使用Tooltip包裹需要显示省略号的文本，并添加CSS样式来控制文本超出长度时的显示：

<style>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

<template>
  <el-tooltip
    class="item"
    effect="dark"
    placement="top"
    :content="text"
    :disabled="!isOverflown(text)"
  >
    <div class="ellipsis" :style="{ maxWidth: '200px' }">{{ text }}</div>
  </el-tooltip>
</template>

在<script>中添加检测文本是否超出长度的方法：

export default {
  data() {
    return {
      text: '这是一段很长的文本，需要显示省略号，鼠标悬浮时展示全文。'
    };
  },
  methods: {
    isOverflown(text) {
      const element = document.createElement('div');
      element.innerHTML = text;
      return element.scrollWidth > element.offsetWidth;
    }
  }
}

这样就实现了文本超出长度时显示省略号，鼠标悬浮时展示全文的功能。