Vue + Element dynamische Mehrfachheader und dynamische Slots

   
Tabellenkopf: [{
    Schlüssel: '1',
    Bezeichnung: 'Datum',
    Requisite: "Datum",
    Breite: '100',
    headerAlign: "Mitte",
    ausrichten: "zentriert",
    Umfang: false,
    sortierbar: wahr
  },
  {
    Taste: '2',
    Bezeichnung: 'Name',
    Requisite: "Name",
    Breite: '100',
    headerAlign: "Mitte",
    ausrichten: "zentriert",
    Umfang: false,
    sortierbar: false
  },
  {
    Taste: '3',
    Bezeichnung: 'Analyse',
    Stütze: 'Analyse',
    Breite: '100',
    headerAlign: "Mitte",
    EigenschaftKinder: [{
      Schlüssel: '31',
      Bezeichnung: „Jahr-zu-Jahr“,
      Stütze: 'TB',
      Breite: '100',
      headerAlign: "Mitte",
      ausrichten: "zentriert",
      Umfang: wahr,
      sortierbar: wahr
    },
    {
      Schlüssel: '32',
      Beschriftung: „Monat für Monat“,
      Stütze: 'HB',
      Breite: '100',
      headerAlign: "Mitte",
      ausrichten: "zentriert",
      Umfang: wahr,
      sortierbar: wahr
    },]
  },
  {
    Taste: '4',
    Bezeichnung: 'Betrag',
    Requisite: "Preis",
    Breite: '100',
    headerAlign: "Mitte",
    ausrichten: 'rechts',
    Umfang: false,
    sortierbar: wahr
  },
  {
    Schlüssel: '5',
    Bezeichnung: 'Adresse',
    Requisite: "Adresse",
    Breite: '',
    HeaderAlign: "links",
    ausrichten: 'links',
    Umfang: false,
    sortierbar: false
  }
  ],

<Vorlage>
  <el-Tabelle
    :data="Tabellendaten"
    Streifen
    größenveränderbar
    Grenze
    Höhe="300"
    Stil="Breite: 1000px"
  >
    <el-table-column
      Typ="Index"
      :index="Indexmethode"
      label="Seriennummer"
      ausrichten="zentrieren"
      Breite="60"
    >
    </el-Tabellenspalte>
    <el-table-column
      v-for="(Element, Index) im Tabellenkopf"
      :Schlüssel="Index"
      :prop="Artikel.prop"
      :label="Artikel.label"
      :Breite="Artikelbreite"
      :ausrichten="Element.ausrichten"
      :headerAlign="Element.headerAlign"
      :sortierbar="Artikel.sortierbar"
      Überlauf-Tooltip anzeigen
    >
      <el-table-column
        v-für="(Element, Index) in Element.propChildren"
        :Schlüssel="Index"
        :prop="Artikel.prop"
        :label="Artikel.label"
        :Breite="Artikelbreite"
        :ausrichten="Element.ausrichten"
        :headerAlign="Element.headerAlign"
        :sortierbar="Artikel.sortierbar"
        Überlauf-Tooltip anzeigen
      >
        <template slot-scope="Umfang">
          <div v-if="item.scope === true">
            <div v-if="scope.row[item.prop] == ''">
              {{ Umfang.row[item.prop] }}
            </div>
            <div v-else-if="scope.row[item.prop] > '0'" style="Farbe: grün">
              {{ Umfang.row[item.prop] }}%<i class="el-icon-caret-top"></i>
            </div>
            <div v-else-if="scope.row[item.prop] < '0'" style="Farbe: rot">
              {{ Umfang.row[item.prop] }}%<i class="el-icon-caret-bottom"></i>
            </div>
          </div>
          <div v-else-if="scope.row[item.prop] < '0'" style="Farbe: rot">
            {{ Umfang.row[item.prop] }}
          </div>
          <div v-else>{{ Umfang.row[item.prop] }}</div>
        </Vorlage>
      </el-Tabellenspalte>
      <template slot-scope="Umfang">
          <div v-if="item.scope === true">
            <div v-if="scope.row[item.prop] == ''">
              {{ Umfang.row[item.prop] }}
            </div>
            <div v-else-if="scope.row[item.prop] < '0'" style="Farbe: rot">
              {{ Umfang.row[item.prop] }}
            </div>
             <div v-else-if="scope.row[item.prop] > '0'">
              {{ Umfang.row[item.prop] }}
            </div>
          </div>
        <div v-else>{{ Umfang.row[item.prop] }}</div>
        </Vorlage>
    </el-Tabellenspalte>
  </el-Tabelle>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      // Ob die einzelne Kopfzeile die Daten dieser Spalte vergleicht, hängt vom Umfang ab.
      Tabellenkopf: [{
        Schlüssel: '1',
        Bezeichnung: 'Datum',
        Requisite: "Datum",
        Breite: '100',
        headerAlign: "Mitte",
        ausrichten: "zentriert",
        Umfang: false,
        sortierbar: wahr
      },
      {
        Taste: '2',
        Bezeichnung: 'Name',
        Requisite: "Name",
        Breite: '100',
        headerAlign: "Mitte",
        ausrichten: "zentriert",
        Umfang: false,
        sortierbar: false
      },
      {
        Taste: '3',
        Bezeichnung: 'Analyse',
        Stütze: 'Analyse',
        Breite: '100',
        headerAlign: "Mitte",
        EigenschaftKinder: [{
          Schlüssel: '31',
          Bezeichnung: „Jahr-zu-Jahr“,
          Stütze: 'TB',
          Breite: '100',
          headerAlign: "Mitte",
          ausrichten: "zentriert",
          Umfang: wahr,
          sortierbar: wahr
        },
        {
          Schlüssel: '32',
          Beschriftung: „Monat für Monat“,
          Stütze: 'HB',
          Breite: '100',
          headerAlign: "Mitte",
          ausrichten: "zentriert",
          Umfang: wahr,
          sortierbar: wahr
        },]
      },
      {
        Taste: '4',
        Bezeichnung: 'Betrag',
        Requisite: "Preis",
        Breite: '100',
        headerAlign: "Mitte",
        ausrichten: 'rechts',
        Umfang: false,
        sortierbar: wahr
      },
      {
        Schlüssel: '5',
        Bezeichnung: 'Adresse',
        Requisite: "Adresse",
        Breite: '',
        headerAlign: "links",
        ausrichten: 'links',
        Umfang: false,
        sortierbar: false
      }
      ],

      // DatentabelleDaten: [{
        Datum: '2016-05-02',
        Name: 'Wang Xiaohu',
        HB: '-1,1',
        TB: '2,5',
        Preis: '2982.01',
        Adresse: ,1518 Jinshajiang Road, Bezirk Putuo, Shanghai, Lane …‘
      }, {
        Datum: '2016-05-04',
        Name: 'Wang Xiaohu',
        HB: '-0,28',
        TB: '1.1',
        Preis: '2982.01',
        Adresse: „Nr. 1517, Jinshajiang Road, Bezirk Putuo, Shanghai“
      }, {
        Datum: '2016-05-01',
        Name: 'Wang Xiaohu',
        HB: '28',
        TB: '-0,11',
        Preis: '2982.01',
        Adresse: „Nr. 1519, Jinshajiang Road, Bezirk Putuo, Shanghai“
      }, {
        Datum: '2016-05-03',
        Name: 'Zhang San',
        HB: '21',
        TB: '2.11',
        Preis: '-201.02',
        Adresse: „Nr. 1516, Jinshajiang Road, Bezirk Putuo, Shanghai“
      }, {
        Datum: '2016-05-11',
        Name: 'Zhang San',
        HB: '0,28',
        TB: '-1,1',
        Preis: '2982.01',
        Adresse: „Nr. 1516, Jinshajiang Road, Bezirk Putuo, Shanghai“
      }, {
        Datum: '2016-05-02',
        Name: 'Wang Xiaohu',
        HB: '-0,18',
        TB: '-1,15',
        Preis: '2982.01',
        Adresse: ,1518 Jinshajiang Road, Bezirk Putuo, Shanghai, Lane …‘
      }, {
        Datum: '2016-05-04',
        Name: 'Wang Xiaohu',
        HB: '-1,01',
        TB: '1.1',
        Preis: '2982.01',
        Adresse: „Nr. 1517, Jinshajiang Road, Bezirk Putuo, Shanghai“
      }, {
        Datum: '2016-05-01',
        Name: 'Wang Xiaohu',
        HB: '-28',
        TB: '2.11',
        Preis: '2982.01',
        Adresse: „Nr. 1519, Jinshajiang Road, Bezirk Putuo, Shanghai“
      }, {
        Datum: '2016-05-03',
        Name: 'Zhang San',
        HB: '',
        TB: '0,1',
        Preis: '-200,01',
        Adresse: „Nr. 1516, Jinshajiang Road, Bezirk Putuo, Shanghai“
      }, {
        Datum: '2016-05-11',
        Name: 'Zhang San',
        HB: '18',
        TB: '-0,81',
        Preis: '2982.01',
        Adresse: „Nr. 1516, Jinshajiang Road, Bezirk Putuo, Shanghai“
      }],
    }
  },
  Methoden: {
    indexMethode(index) {
      Rückgabeindex + 1;
    }
  }
}
</Skript>