element-ui table 给表头添加icon图标,以及鼠标滑过时显示提示内容

250 阅读1分钟

一、通过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>

效果:

image.png

二、通过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;",
          }),
        ]),
      ]);
    },
  },

效果:

image.png

三、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;",
          }),
        ]),
      ]);
    },

效果:

image.png