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

 

方法一： 使用element table 提供的slot 属性，设置为header 即可自定义表头内容。代码示例如下：

 

<el-table-column prop="xxx" label="xxx">

　　<template slot="header" slot-scope="scope">

　　　　<span>操作{{scope.row.xxx}}</span>

　　　　<i class="icon xxx-icon"/>

　　</template>

　　<template slot-scope="scope">

　　　　<p>{{scope.row.xxx}}</p>

　　</template>

</el-table-column>

 

 

 

方法二：

另外，element table还提供了render-header 属性，也可以对标题进行渲染，

 

代码如下：

methods: {
    renderHeader(h, { column }) {
      const serviceContent= [
        h(
          "div",
          {
            slot: "content",
            style: "margin-bottom:5px"
          },
          "内容内容内容内容内容内容内容内容"
        ),
        h(
          "div",
          {
            slot: "content"
          },
          "内容内容内容内容内容内容内容呢"
        ),
        h(
          "div",
          {
            slot: "content"
          },
          "内容内容内容内容内容内容内容内容"
        ),
        h(
          "div",
          {
            slot: "content"
          },
          "内容内容内容内容内容内容内容内容"
        ),
        h(
          "div",
          {
            slot: "content",
            style: "margin-bottom:5px"
          },
          "内容内容内容内容内容内容内容内容内容"
        )
      ];
      const paymentContent= h(
        "div",
        {
          slot: "content"
        },
        "内容内容内容"
      );
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              placement: "bottom"
            }
          },
          [
            column.label != "xx" ? serviceContent: paymentContent,
            h("i", {
              class: "el-icon-warning-outline",
              style: "color:orange;margin-left:5px;"
            })
          ]
        )
      ]);
    }
  }