el-table-column的show-overflow-tooltip样式修改

### 自定义 `show-overflow-tooltip` 样式的方法 在 Element Plus 或 Element UI 中，`show-overflow-tooltip` 属性会自动为表格列中的内容启用工具提示功能。然而，默认情况下无法直接通过 CSS 修改该工具提示的样式，因为它是基于浏览器原生的 `title` 属性实现的[^1]。 如果需要自定义工具提示的样式，可以考虑以下方法： #### 方法一：禁用默认行为并使用 `<el-tooltip>` 替代 可以通过关闭 `show-overflow-tooltip` 并手动添加 `<el-tooltip>` 组件来完全控制工具提示的行为和样式。以下是具体实现方式： ```vue <el-table-column :sortable="true" label="错误消息"> <template #default="scope"> <el-tooltip placement="top-start" effect="dark"> <template #content> <div class="custom-tooltip-content">{{ scope.row.errMsg }}</div> </template> <div class="ellipsis-text">{{ scope.row.errMsg }}</div> </el-tooltip> </template> </el-table-column> ``` 在此示例中： - 使用了 `<el-tooltip>` 来替代默认的 `show-overflow-tooltip` 行为。 - 工具提示的内容被放置在一个具有特定样式的容器 `.custom-tooltip-content` 中[^2]。 #### 方法二：覆盖全局 Tooltip 样式 虽然不能直接修改由 `show-overflow-tooltip` 自动生成的工具提示样式，但可以通过覆盖全局的 `::after` 和 `::before` 伪类来自定义其外观。例如： ```css /* 覆盖默认的 tooltip 样式 */ .el-table .cell:hover::after { content: attr(title); position: absolute; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px 10px; border-radius: 4px; z-index: 9999; } /* 隐藏原始 title 提示框 */ .el-table .cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` 此方法适用于希望保留 `show-overflow-tooltip` 功能的同时调整其显示效果的情况。 --- ### 注意事项 - 如果选择方法一，则需注意性能问题，尤其是在数据量较大时频繁渲染多个 `<el-tooltip>` 可能会影响页面流畅度。 - 对于方法二，由于依赖于浏览器自带的 `title` 属性机制，某些复杂场景下可能难以满足需求。 ---