el-table多级表头封装（+表头省略号）

<template>
  <div>
    <p>表格数据</p>
    <el-table
      :data="tableData"
      border
      height="400px"
      max-height="400px"
      size="small"
      row-class-name="row"
      cell-class-name="column"
      :highlight-current-row="true"
      fit
    >
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.prop"
        :width="item.width"
        :label="item.label"
        :render-header="renderHeader"
        show-overflow-tooltip
        align="center"
      >
        <el-table-column
          v-for="(itemchildren, indexchildren) in item.tableLabel"
          :key="indexchildren"
          :prop="itemchildren.prop"
          :width="itemchildren.width"
          :label="itemchildren.label"
          :render-header="renderHeader"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2018-07-24",
          profit: 35394.05,
        },
        {
          id: 2,
          const: 102203.71,
          profit: 35394.05,
        },
      ],
      // 子组件的表头数据
      tableLabel: [
        { label: "", width: "40", prop: "id" },
        { label: "多级表头",
          tableLabel: [
            { label: "销售额第三方", width: "", prop: "sale" },
            { label: "成本啥的啥的", width: "", prop: "const" },
            { label: "利润第三", width: "", prop: "profit" },
          ],
        },
        { label: "销售量", width: "", prop: "sales" },
        { label: "销售额第三方", width: "", prop: "sale" },
        { label: "成本啥的啥的", width: "", prop: "const" },
        { label: "利润第三", width: "", prop: "profit" },
      ],
    };
  },
  methods: {
    // 表头省略号，超出n显示，例：超出4
    renderHeader(h, { column }) {
      // console.log($index);
      let titleText = column.label;
      if (column.label.length > 4) {
        titleText = column.label.slice(0, 4) + "...";
        return [
          h(
            "el-tooltip",
            {
              props: {
                content: (function () {
                  const label = column.label;
                  return label;
                })(),
                placement: "top",
              },
            },
            [h("div", {}, titleText)]
          ),
        ];
      }
      return titleText;
    }
  },
};
</script>

<style>
</style>