element-ui｜el-table 修改tooltip样式

在Element UI中，要修改el-table组件的tooltip样式，你可以通过CSS来覆盖默认的样式。以下是一个简单的例子，展示如何通过自定义类来修改tooltip的背景色和文本颜色。

首先，定义你的自定义类：

/* 自定义tooltip样式 */
.custom-tooltip {
  background-color: #fef0f0 !important; /* 背景色 */
  color: #fa6868 !important; /* 文本颜色 */
  border: none !important; /* 边框 */
  /* 其他需要修改的样式 */
}

然后，在你的Vue组件中，使用这个自定义类：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <!-- 其他列定义 -->
    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-tooltip class="item custom-tooltip" effect="dark" placement="top" content="这是一段内容">
          <el-button size="small">查看</el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...你的数据
      ]
    };
  }
};
</script>

在上面的代码中，el-tooltip组件的class属性被设置为custom-tooltip，这样就可以应用你在CSS中定义的样式。请确保将CSS放入全局样式文件中，或者通过<style>标签在你的组件内部包含，以确保它能被正确加载和应用。