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