vue全屏模式下show-overflow-tooltip无效

在Vue全屏模式下，show-overflow-tooltip属性可能无效的原因是单元格的padding-right影响到了tooltip的显示。可以在CSS样式中添加以下代码来解决这个问题：`.el-table .cell, .el-table th div { padding-right: 0; }`。这样就可以解决show-overflow-tooltip无效的问题了。

相关问题

vue show-overflow-tooltip

Vue的show-overflow-tooltip是一个用于处理溢出内容显示提示的指令。当元素内容超出容器大小时，该指令可以在鼠标悬停时显示一个提示框，以展示完整的内容。

使用show-overflow-tooltip指令需要先安装vue-directive-tooltip插件。安装完成后，在需要应用该指令的元素上添加v-show-overflow-tooltip属性即可。

以下是show-overflow-tooltip的使用示例：

<template>
  <div class="container">
    <div class="content" v-show-overflow-tooltip>
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
import 'vue-directive-tooltip/dist/vueDirectiveTooltip.css';
import VueDirectiveTooltip from 'vue-directive-tooltip';

export default {
  directives: {
    showOverflowTooltip: VueDirectiveTooltip.showOverflowTooltip,
  },
};
</script>

<style>
.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

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

在上述示例中，我们创建了一个容器元素，设置了固定的宽度和高度，并将其内容超出容器大小。通过v-show-overflow-tooltip指令，当鼠标悬停在内容上时，将显示一个提示框，展示完整的内容。

show-overflow-tooltip

show-overflow-tooltip是一个Vue Element UI框架中的属性。当表格列中的内容过长时，可以使用该属性来让内容在一行内显示。如果内容无法完全显示，鼠标悬停在该单元格上时，会显示全部文字。通常情况下，会出现如您提供的效果。可以通过将show-overflow-tooltip设置为true来启用该功能。