方法一： 使用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;" }) ] ) ]); } }