给el-table表头添加icon图标，以及鼠标移入icon时显示el-tooltip提示内容

最新推荐文章于 2024-07-04 10:44:38 发布

菜鸟笔记本

最新推荐文章于 2024-07-04 10:44:38 发布

阅读量4.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： elementUI 文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/qq_25983579/article/details/111477904

elementUI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在 Element UI 的表格组件中利用 Tooltip 组件来显示较长的内容，通过示例代码展示了如何配置 Tooltip 以及其样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法（推荐）：
在这里插入图片描述
完整代码：

<template>
  <div class="container">
    <el-table :data="tableData">
      <el-table-column prop="test1" align="center">
        <template slot="header">
          <span>测试1</span>
          <el-tooltip popper-class="tooltip" placement="top">
            <i class="el-icon-warning-outline"></i>
            <div slot="content" class="tooltip-content">
              <div>1、测试内容测试内容测试内容，</div>
              <div class="indent">测试内容测试内容测试内容。</div>
              <div>2、测试内容测试内容测试内容</div>
              <div>3、测试内容测试内容测试内容</div>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="测试2" prop="test2" align="center"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{ test1: "1", test2: "2" }],
    };
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-table {
  width: 500px;
  margin-top:300px;
  border: 1px solid #eee;
}
//下面样式一定需要写在最外层，不能嵌套在el-table或其他样式里面
.tooltip-content {
  div {
    line-height: 18px;
  }
  div:nth-child(3){
    padding:5px 0;
  }
  .indent{
    text-indent: 20px;
  }
}
</style>