el-table 中 show-overflow-tooltip宽度能够完全显示还显示

### 解决 `el-table` 中 `show-overflow-tooltip` 属性在内容宽度足够时不显示 Tooltip 的问题 为了实现当表格单元格中的内容能够完全显示时，不触发 `show-overflow-tooltip` 功能的效果，可以通过自定义样式和逻辑判断来控制这一行为。 #### 方法一：通过 CSS 控制 Overflow 效果 可以在列定义中使用条件渲染类名的方法，在内容超出容器宽度时才应用 `show-overflow-tooltip` 所需的样式： ```html <el-table-column prop="name" label="姓名"> <template slot-scope="scope"> <div :class="[isOverflow(scope.row.name, $refs[`cell-${scope.$index}`]) ? 'force-show-tooltip' : '']" ref=`cell-${scope.$index}` style="display:inline-block;width:100%;"> {{ scope.row.name }} </div> </template> </el-table-column> <style scoped> .force-show-tooltip { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> ``` 此方法利用 JavaScript 判断文本是否溢出并动态添加 class 来决定何时启用 tooltip[^2]。 #### 方法二：基于 Vue 组件生命周期优化 Tooltip 显示逻辑 另一种更优雅的做法是在组件挂载后计算实际布局尺寸，并据此调整每一行数据项上的 `show-overflow-tooltip` 值。这通常涉及到监听窗口大小变化事件以及重新评估各单元格的状态。 ```javascript mounted() { this.adjustTooltips(); window.addEventListener('resize', this.adjustTooltips); }, beforeDestroy() { window.removeEventListener('resize', this.adjustTooltips); }, methods: { adjustTooltips() { setTimeout(() => { // 确保 DOM 已更新 const cells = document.querySelectorAll('.el-table__row td'); Array.from(cells).forEach((cell, index) => { let cellContentWidth = cell.querySelector('.cell').scrollWidth; let cellVisibleWidth = cell.offsetWidth; if (this.tableData[index].showTooltip === undefined || (this.tableData[index].showTooltip && cellContentWidth <= cellVisibleWidth)) { this.$set(this.tableData[index], 'showTooltip', false); } else if (!this.tableData[index].showTooltip && cellContentWidth > cellVisibleWidth){ this.$set(this.tableData[index], 'showTooltip', true); } }); }, 0); } } ``` 上述代码片段展示了如何遍历所有单元格以检测其内部内容的实际宽度与可见区域之间的关系，并相应地设置每条记录上用于控制 tooltip 可见性的字段 `showTooltip`[^1]。