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

第一种方法 （推荐） ：

完整代码：

<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>

参考链接:https://blog.csdn.net/weixin_45899022/article/details/104291057