Vue.js verwaltet die Kapselung von Hintergrundtabellenkomponenten

Ich habe vor Kurzem ein neues Projekt gestartet und kurz über meine eigene Tabellenkapselung gesprochen.

Problemanalyse

Warum Kapselung

Zunächst einmal: Warum kapseln? Liegt es am Streben nach Technologie? Nein, es liegt an Faulheit. Ich möchte nicht ständig Codes einfügen und kopieren, deshalb möchte ich die Tabelle kapseln. Beim Erstellen einer neuen Tabelle muss ich nur die Daten eingeben.

Was ist der Inhalt des Pakets?

Es gibt zwei Hauptkomponenten: die Tabellenkomponente und die Paging-Komponente.

Sobald Sie dies verstanden haben, können Sie mit dem Verpacken der Komponenten beginnen.

Tabellenkomponente kapseln

Datenformat bestätigen

Bestimmen Sie zunächst das Datenformat. Dazu müssen wir uns die el-table-Komponente ansehen.

<el-table :data="tableData" style="width: 100%">
   <el-table-column prop="date" label="Datum" width="180" />
   <el-table-column fixed="rechts" label="Operation" width="100">
      <template slot-scope="Umfang">
        <el-button @click="handleClick(scope.row)" type="text" size="small">Anzeigen</el-button>
        <el-button type="text" size="small">Bearbeiten</el-button>
     </Vorlage>
   </el-Tabellenspalte>
</el-Tabelle>

Betrachten wir nun Datentypen wie Label, Prop, Breite des Buttontyps, Ereignis usw.

let paramsType = {
  Daten: Array, // Daten laden: Boolean,
  AuswahlAnzeigen: Boolean,
  Spalten:Array = [
    { 
      Bezeichnung: Zeichenfolge,
      Requisite: String,
      Filter: Funktion,
      isSlot: Boolesch,
      Breite: Zahl,
      Vorlage: Funktion,
      btns: Array = [
        { Name: Zeichenfolge,
          btnTyp: Zeichenfolge,
          Klicktyp: Zeichenfolge,
          Routertyp: String,
          URL: Zeichenfolge,
          Abfrage: Funktion,
          btnClick: Funktion
        }
      ]
    }
  ] 
}

Nachdem wir das Datendokument definiert haben, können wir mit der Kapselung von Komponenten beginnen

Paketkomponenten

Kapselung globaler Komponenten

Der Grund für die Kapselung globaler Komponenten besteht darin, Ärger zu vermeiden. Der ganze Zweck besteht darin, faul zu sein.

Erstellen Sie eine Komponentendatei unter src und schreiben Sie unsere Komponenten hinein. Es wird empfohlen, jede Komponente zur einfacheren Wartung in einem separaten Ordner abzulegen.

Erstellen Sie Ihre eigene table.vue-Komponente. Meine heißt FrTable. Lassen Sie uns jetzt nicht über den Inhalt sprechen, sondern zuerst über die Referenz.

Weltweiter Einsatz

Importieren Sie die FrTable-Datei in die Datei index.js unter Komponenten, durchlaufen Sie hier alle Komponenten und exportieren Sie

Der Code lautet wie folgt:

importiere TrTable aus './FrTable/index'

Konstante Komponenten = [TrTable]

const install = (Vue) => {
  Komponenten.map(Komponente => {
    Vue.component(Komponentenname, Komponente)
  })
}

wenn (Typ des Fensters !== 'undefiniert' und Fenster.Vue) {
  installieren(Window.Vue)
}

Standard exportieren {
  installieren
}

Exportieren Sie es dann nach main.js und verwenden Sie die Komponente über Vue.use() wie folgt

importiere globalComponents aus '@/components/index'
Vue.use(globaleKomponenten)

Verwendung auf der Seite

<fr-Tabelle />

Kapselung von Tabellenkomponenten

Zu berücksichtigende Fragen

Wie viele Fälle sind in der Tabelle?

• Normale Datentypanzeige
• Einzigartige Anzeigemethode
• Mit Bedienknopf

Für den ersten Typ müssen wir eigentlich nicht viel tun, wir müssen es nur durch eine For-Schleife rendern.

Das zweite ist eigentlich ok, wir können es über den Slot anpassen

Die dritte Art ist die Tastenbedienung. Schaltflächen können tatsächlich in viele Typen unterteilt werden

Art der Schaltfläche

1. Normale Verwendung von Schaltflächen, Klickfunktionalität
2. Tastensprungfunktion
3. Der Button öffnet eine neue Seite
4. Schaltfläche fungiert als benutzerdefiniertes Ereignis

Code schreiben

Mithilfe des Obigen haben wir alle Probleme der Tabelle analysiert. Jetzt müssen wir nur noch den Code eingeben.

Erster Fall

<el-table :data="Daten" border :loading="wird geladen">
        <!-- Prüfen -->
   <el-table-column v-if="selectionShow" type="selection" width="50" align="center" :reserve-selection="true" />
     <template v-for="(Element, Index) in Spalten">
        <el-table-column :Schlüssel="Index" v-bind="Element">
            <!-- Benutzerdefinierte Kopfzeile -->
          <template v-if="item.customHeader" slot="header">
              <slot:name="item.headerProp" />
          </Vorlage>
          <template slot-scope="Umfang">
               <span v-html="handleFilter(item, scope.row, item.prop)" />
          </Vorlage>
        </el-Tabellenspalte>
     </Vorlage>
 </el-Tabelle>

Hier sehen wir die handleFilter-Methode

Diese Methode verarbeitet die Daten.

Bei den Datentypen unterscheidet man zwischen normalen Datentypen, zu konvertierenden Datentypen und durch Vorlagen konvertierten Datentypen.

Der Code lautet wie folgt

handleFilter(Element, Wert, Eigenschaft) {
  let Wert = val[Eigenschaft]
  wenn (Element.Templet) Wert = Element.Templet(Wert)
  Element.Filter zurückgeben? this.$options.filters[item.filter](val[prop]) : Wert
},

Der erste Fall ist relativ einfach, nur einfaches Daten-Rendering und angepasstes Header-Rendering. Insgesamt ist das obige eine Mehrfachauswahlfunktion + Normalform

Zweiter Fall

Benutzerdefinierte Liste

<template slot-scope="Umfang">
   <!-- Benutzerdefinierter Inhalt -->
   <Steckplatz
      v-if="item.isSlot"
      :name="Artikel.Eigenschaft"
      :Zeile="Umfang.Zeile"/
   >
</Vorlage>

Für benutzerdefinierte Kategorien müssen wir nur isSlot auf true, name auf prop und row auf data setzen.

Der dritte

Der dritte Knopf hat vier Situationen

<template v-if="item.btns">
   <el-Schaltfläche
     v-for="(btn, i) in Artikel.btns"
     :Schlüssel="i"
    Klasse="Herr_10"
    :Größe="btn.mini ? btn.mini: 'klein'"
    :Typ="btn.Typ ? btn.Typ: 'primär'"
    @click="btnClickfunc(btn, Umfang.Zeile)"
  >
     {{ btn.name }}
  </el-button>
</Vorlage>

Die Schaltfläche wird tatsächlich in einer Schleife gerendert, hauptsächlich zur Ereignisanalyse, die über das Ereignis btnClickfunc ausgeführt wird.

btnClickfunc(Spalte, Zeile) {
      const Pfad = {
        [Spalte.Routertyp]: Spalte.URL,
        Abfrage: Spalte.Abfrage? Spalte.Abfrage(Zeile): ''
      }
      wenn (Spalte.Klicktyp === 'Router') {
        this.$router.push(Pfad)
      } sonst wenn (Spalte.Klicktyp === 'router_blank') {
        const routeData = this.$router.resolve(Pfad)
        Fenster.öffnen(routeData.href, '_blank')
      } sonst wenn (Spalte.Klicktyp === 'btnClick') {
        Spalte.btnClick(Zeile)
      } anders {
        this.$emit('btnClickFunc', { Spalte: Spalte, Zeile: Zeile })
      }
},

Wir gehen mit verschiedenen Produkttypen unterschiedlich um.

Der Wert von Requisiten

Die aktuellen Parameter stimmen mit den von uns definierten Parametern überein, daher lautet der Code wie folgt

  // Daten: {
      Typ: Array,
      erforderlich: true
    },
    // Spalten der Tabellenkopfparameter: {
      Typ: Array,
      erforderlich: true
    },
    Laden:
      Typ: Boolean,
      Standard: false
    },
    //Mehrfachauswahlfeld selectionShow: {
      Typ: Boolean,
      Standard: false
    },

Von nun an muss nur noch die Verwendung der Komponente überprüft werden.

Verwendung von Komponenten

<fr-Tabelle
      ref="mt"
      :wird geladen="wird geladen"
      :data="Liste"
      :columns="Spalten"
    >
</fr-Tabelle>

Es ist ungefähr so: Wenn Sie Mehrfachauswahl verwenden müssen, definieren Sie die Methode selbst, und dasselbe gilt für die Sortierung.

Kapselung von Paging-Komponenten

Siehe Element-Paging-Komponente

<el-pagination
  Stil="Rand oben: 40px;"
  Hintergrund
  Layout = "Zurück, Pager, Weiter"
  :Seitengröße="Seitenlimit"
   :gesamt="gesamt"
   :current-page="aktuelleSeite"
   @current-change="AktuelleÄnderung handhaben"
/>
handleCurrentChange(Wert) {
   console.log(Wert)
}

Datendefinition

Die Definition lautet wie folgt:

gesamt: Anzahl,
pageLimit: Zahl,
currentPage: Nummer,

Verkapselung

<el-pagination
  Stil="Rand oben: 40px;"
  Hintergrund
  Layout = "Zurück, Pager, Weiter"
  :Seitengröße="Seitenlimit"
  :gesamt="gesamt"
  :current-page="aktuelleSeite"
  @current-change="AktuelleÄnderung handhaben"
/>

handleCurrentChange(Wert) {
   dies.$emit('aktuelleÄnderung', Wert)
}

Es sieht einfach aus, nicht wahr? So einfach ist es auch.

Dann fügen wir der Komponente die Paging-Ereignisse und Parameter hinzu, und die Komponentenkapselung unserer gesamten Tabelle ist abgeschlossen. Bisher haben wir alle Arbeiten zur Kapselung der gesamten Tabellenkomponente abgeschlossen.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Kapselung der vue.js-Verwaltungshintergrundtabellenkomponente. Weitere relevante Inhalte zur Kapselung von Vue-Hintergrundtabellen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!