vue3局部修改el-table的el-tooltip文字颜色

### 修改 Vue3 中 Element Plus 的 el-table 组件中 el-tooltip 文字颜色的方法 在 Vue3 和 Element Plus 中，可以通过自定义 `el-tooltip` 的 `content` 属性或使用作用域插槽（Scoped Slot）来修改 `el-tooltip` 的文字颜色。以下是具体的实现方法： #### 方法一：通过自定义样式类名修改文字颜色 可以为 `el-tooltip` 设置一个自定义的类名，并通过 CSS 样式调整文字颜色。 ```vue <template> <el-table :data="tableData"> <el-table-column label="名称" prop="name"> <template #default="scope"> <el-tooltip class="custom-tooltip" effect="dark" :content="scope.row.name" placement="top"> <span>{{ scope.row.name }}</span> </el-tooltip> </template> </el-table-column> </el-table> </template> <style scoped> .custom-tooltip .el-tooltip__popper { color: red; /* 修改文字颜色 */ } </style> ``` 上述代码中，通过为 `el-tooltip` 添加 `custom-tooltip` 类名，并在样式中定义 `.custom-tooltip .el-tooltip__popper` 的 `color` 属性来修改文字颜色[^1]。 #### 方法二：通过 Scoped Slot 自定义内容 如果需要更灵活的控制，可以使用 `el-tooltip` 的作用域插槽来自定义提示框的内容，并直接设置文字颜色。 ```vue <template> <el-table :data="tableData"> <el-table-column label="名称" prop="name"> <template #default="scope"> <el-tooltip effect="dark" placement="top"> <template #content> <span style="color: blue;">{{ scope.row.name }}</span> <!-- 自定义文字颜色 --> </template> <span>{{ scope.row.name }}</span> </el-tooltip> </template> </el-table-column> </el-table> </template> ``` 在此方法中，通过 `#content` 插槽自定义了 `el-tooltip` 的内容，并直接在 `<span>` 标签中设置了 `style="color: blue;"` 来修改文字颜色[^2]。 #### 方法三：全局修改默认样式 如果希望在整个项目中统一修改 `el-tooltip` 的文字颜色，可以在全局样式文件中覆盖默认样式。 ```css /* 全局样式文件 */ .el-tooltip__popper { color: green !important; /* 强制修改文字颜色 */ } ``` 此方法适用于需要对所有 `el-tooltip` 提示框的文字颜色进行统一调整的情况[^3]。 --- ### 注意事项 - 如果使用了 `scoped` 样式，确保通过深度选择器（如 `>>>` 或 `/deep/`）或者移除 `scoped` 属性来影响 `el-tooltip` 的内部样式。 - 在某些情况下，可能需要使用 `!important` 来覆盖默认样式。 --- ### 示例代码 以下是一个完整的示例，展示了如何在 `el-table` 中局部修改 `el-tooltip` 的文字颜色： ```vue <template> <el-table :data="tableData"> <el-table-column label="名称" prop="name"> <template #default="scope"> <el-tooltip class="custom-tooltip" effect="dark" :content="scope.row.name" placement="top"> <span>{{ scope.row.name }}</span> </el-tooltip> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三' }, { name: '李四' }, { name: '王五' }, ], }; }, }; </script> <style scoped> .custom-tooltip >>> .el-tooltip__popper { color: orange; /* 修改文字颜色 */ } </style> ``` ---