Detaillierte Erklärung der drei Möglichkeiten zum Umbrechen von Text in der El-Table-Kopfzeile

<Vorlage>
  <div Klasse="vueWrap">
    <el-Tabelle
      Stil="Breite: 900px"
      :data="Tabellentext"
      Grenze
      :header-cell-style="{
        Hintergrund: '#FAFAFA',
        Farbe: '#333333',
        Schriftstärke: "fett",
        Schriftgröße: '14px',
      }"
    >
      <el-table-column
        Typ="Index"
        label="Seriennummer"
        Breite="58"
        ausrichten="zentrieren"
      ></el-table-column>

      <!-- Header-Wrapping-Methode 1: Verwenden Sie die Header-Slot-Methode, um den Header-Text in zwei Divs aufzuteilen. Da die Div-Box ein Blockelement ist, werden die beiden Divs umbrochen, sodass auch der Header umbrochen wird. Diese Methode eignet sich zum Header-Wrapping von festen Daten-->
      <el-table-column prop="Werkzeugname" width="180" align="center">
        <template slot="header">
          <div>Werkzeugkasten</div>
          <div>Teilename</div>
        </Vorlage>
        <template slot-scope="Umfang">
          <span>{{ Umfang.Zeile.ToolName }}</span>
        </Vorlage>
      </el-Tabellenspalte>

      <el-table-column label="Lieferant" prop="Lieferant" width="120" align="center">
      </el-Tabellenspalte>

      <!-- Methode 2 für den Zeilenumbruch in der Tabellenüberschrift. Im Vergleich zu Methode 1 verwendet diese Methode das Zeilenumbruchzeichen /n sowie eine CSS-Steuerung für Leerzeichen im Leerzeichenstil -->
      <el-table-column
        :label="labelFn()"
        prop="Lieferantenland"
        Breite="180"
        ausrichten="zentrieren"
      >
      </el-Tabellenspalte>

      <!-- Dritte Methode zum Zeilenumbruch in der Tabellenüberschrift, dynamische Methode-->
      <el-table-column
        v-for="(Element, Index) im Tabellenkopf"
        :Schlüssel="Index"
        :label="Artikel.Etikettenname"
        :prop="Artikel.PropName"
        Breite="180"
        ausrichten="zentrieren"
        :render-header="Renderheader"
      ></el-table-column>
    </el-Tabelle>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      // Die Kopfzeile der dynamischen Datentabelle muss vom Backend zurückgegeben und an den erforderlichen Zeilenumbrüchen durch Kommas getrennt werden. tableHeader: [
        {
          labelName: "Modell 001, Preis (Yuan)",
          propName: "TypEins",
        },
        {
          labelName: "Modell 002, Preis (Yuan)",
          Eigenschaftenname: "TypZwei",
        },
      ],
      // Tabellenkörperdaten tableBody: [
        {
          ID: "2021111101",
          toolName: "5G-Dienste",
          Lieferant: "Huawei",
          Lieferantenland: "China",
          TypEins: "8888888",
          TypZwei: "9999999",
        },
        {
          ID: "2021111101",
          Werkzeugname: "6G-SERVER",
          Lieferant: "China hat eine glänzende Zukunft",
          Lieferantenland: "CHINA",
          TypEins: "678678678",
          TypZwei: "789789789",
        },
      ],
    };
  },
  Methoden: {
    labelFn() {
      // Fügen Sie bei Bedarf Zeilenumbrüche hinzu und setzen Sie „return `supplier_ncountry`“ unten im Leerzeichenstil.
    },

    // Die Rendermethode für die Header-Funktion der Ele.me-Benutzeroberfläche ähnelt etwas der Header-Slot-Methode // Sie teilt den Text der Header-Daten ebenfalls in zwei Teile und rendert den Inhalt dann in zwei Divs (Div wird automatisch umbrochen)
    renderheader(h, { Spalte, $index }) {
      return h("div", {}, [
        h("div", {}, Spalte.Beschriftung.geteilt(",")[0]),
        h("div", {}, Spalte.Beschriftung.geteilt(",")[1]),
      ]);
    },
    
  },
};
</Skript>
<style lang="less" scoped>
/tief/ .el-table th.el-table__cell > .cell {
  Leerzeichen: vor;
  // Leerzeichen: Pre-Wrap; // funktioniert auch.
  
}
</Stil>