Detailed explanation of three ways to wrap text in el-table header

<template>
  <div class="vueWrap">
    <el-table
      style="width: 900px"
      :data="tableBody"
      border
      :header-cell-style="{
        background: '#FAFAFA',
        color: '#333333',
        fontWeight: 'bold',
        fontSize: '14px',
      }"
    >
      <el-table-column
        type="index"
        label="Serial number"
        width="58"
        align="center"
      ></el-table-column>

      <!-- Header wrapping method 1: Use the header slot method to split the header text into two divs. Because the div box is a block element, the two divs will wrap, so the header will wrap. This method is suitable for header wrapping of fixed data-->
      <el-table-column prop="toolName" width="180" align="center">
        <template slot="header">
          <div>Toolbox</div>
          <div>Part Name</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.toolName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="Supplier" prop="supplier" width="120" align="center">
      </el-table-column>

      <!-- Table header line break method 2, compared with method 1, this method uses /n line break character, plus CSS white-space blank style control -->
      <el-table-column
        :label="labelFn()"
        prop="supplierCountry"
        width="180"
        align="center"
      >
      </el-table-column>

      <!-- Table header line break method three, dynamic method-->
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :label="item.labelName"
        :prop="item.propName"
        width="180"
        align="center"
        :render-header="renderheader"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // The dynamic data table header needs to be returned by the backend, and separated by commas where line breaks are needed tableHeader: [
        {
          labelName: "Model 001, Price (yuan)",
          propName: "typeOne",
        },
        {
          labelName: "Model 002, Price (Yuan)",
          propName: "typeTwo",
        },
      ],
      // Table body data tableBody: [
        {
          id: "2021111101",
          toolName: "5G Services",
          supplier: "Huawei",
          supplierCountry: "China",
          typeOne: "8888888",
          typeTwo: "9999999",
        },
        {
          id: "2021111101",
          toolName: "6G-SERVER",
          supplier: "China has a bright future",
          supplierCountry: "CHINA",
          typeOne: "678678678",
          typeTwo: "789789789",
        },
      ],
    };
  },
  methods: {
    labelFn() {
      // Add line breaks where needed, and set return `supplier_ncountry` in the white-space style at the bottom;
    },

    // The header function rendering method of the Ele.me UI is somewhat similar to the header slot method // It also divides the header data text into two pieces, and then renders the content into two divs (div automatically wraps)
    renderheader(h, { column, $index }) {
      return h("div", {}, [
        h("div", {}, column.label.split(",")[0]),
        h("div", {}, column.label.split(",")[1]),
      ]);
    },
    
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-table th.el-table__cell > .cell {
  white-space: pre;
  // white-space: pre-wrap; // also works.
  
}
</style>