技術標籤：elementUIvueelementui

第一種方法 （推薦） ：

完整程式碼：

<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