Vue + Element dynamische Mehrfachheader und dynamische Slots

Inhaltsverzeichnis

1. Nachfrage
2. Wirkung
3. Alle Codes

1. Nachfrage

Benutzer können Tabellen selbst konfigurieren und der Wartungsaufwand für den Systemcode wird reduziert.

2. Wirkung

JSON-Header:

Hinweis: Der Umfang (Feldname kann ein anderer sein) gibt an, ob der Steckplatz für diese Spalte aktiviert werden soll. Es gibt propChildren, die mehrere Header-Ebenen enthalten.

   
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
  }
  ],

3. Alle Codes

<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>

Dies ist das Ende dieses Artikels über dynamische Mehrfachheader und dynamische Slots von Vue + Element. Weitere verwandte dynamische Mehrfachheader und dynamische Slots von Vue + Element finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren: