一、通过Scoped slot
<template>
<div id="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
<template slot="header">
<span>日期123</span>
<el-tooltip>
<i class="el-icon-question" />
<div slot="content">提示的内容</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope" slot="header">
<span>{{ scope.column.label }}</span>
<el-tooltip>
<i class="el-icon-question" />
<div slot="content">提示的内容</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
serviceCharge: "1000",
payment: "100",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
serviceCharge: "1000",
payment: "200",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
serviceCharge: "1000",
payment: "300",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
serviceCharge: "1000",
payment: "400",
},
],
};
},
};
</script>
效果:
二、通过render-header
<el-table-column
label="服务费收入(流量主)"
prop="serviceCharge"
:render-header="renderHeader"
></el-table-column>
<el-table-column
label="货款"
prop="payment"
:render-header="renderHeader"
></el-table-column>
methods: {
renderHeader(h, { column }) {
const serviceContent = [
h(
"div",
{ slot: "content", style: "margin-bottom:5px" },
"服务费收入(流量主)计算公式:"
),
h("div", { slot: "content" }, "1、分成数值百分比:"),
h(
"div",
{ slot: "content" },
"商家结算服务费百分比 = 券后价 * 销量 * 服务费比例(商家)"
),
h(
"div",
{ slot: "content" },
"商家结算服务费固定值 = 销量 * 服务费固定值(商家)"
),
h(
"div",
{ slot: "content", style: "margin-bottom:5px" },
"服务费收入(流量主) = 商家结算服务费 * 分成数值百分比"
),
h("div", { slot: "content" }, "2、分成数值固定值:"),
h(
"div",
{ slot: "content" },
"服务费收入(流量主) = 销量 * 分成数值固定值"
),
];
const paymentContent = h(
"div",
{ slot: "content" },
"货款 = 券后价 * 销量"
);
return h("div", [
h("span", column.label),
h("el-tooltip", { props: { placement: "bottom" } }, [
column.label === "货款" ? paymentContent : serviceContent,
h("i", {
class: "el-icon-warning-outline",
style: "color:orange;margin-left:5px;",
}),
]),
]);
},
},
效果:
三、render-header传参
<el-table-column
label="货款1"
prop="payment"
:render-header="(h, obj) => renderHeader1(h, obj, { text: '你的参数' })"
></el-table-column>
renderHeader1(h, { column }, params) {
console.log({ ...column });
return h("div", [
h("span", column.label),
h("el-tooltip", { props: { placement: "bottom", content: params.text } }, [
h("i", {
class: "el-icon-warning-outline",
style: "color:orange;margin-left:5px;",
}),
]),
]);
},
效果: