Sekundäre Kapselung des Elements el-table table (mit Tischhöhenanpassung)

Vorwort

Während meines Praktikums in der Firma habe ich das Framework vue+element-ui für die Front-End-Entwicklung verwendet und die Tabelle el-table häufiger eingesetzt. Einige Geschäftslogiken waren ähnlich und an manchen Stellen gab es eine hohe Wiederholungsrate. Wenn mehrere Seiten dieselbe Funktion verwendeten, musste ich wiederholt logisch ähnlichen Code schreiben. Daher plante ich, die Tabellenkomponente zu kapseln, denselben Code und dieselbe Logik zusammen zu kapseln und unterschiedliche Geschäftslogiken zu extrahieren. Lassen Sie es uns ohne weitere Umschweife umsetzen.

1. Nativer El-Tbale-Code – einfache Kapselung

Hier zitieren wir direkt die offizielle grundlegende Verwendungsvorlage und kopieren sie direkt (✪ω✪). Der folgende Code extrahiert hauptsächlich den HTML-Teil. Es ist ersichtlich, dass jede el-table-column die Attribute prop, label und width enthält, diese Attributwerte jedoch geringfügig unterschiedlich sind. Die übrigen Teile sind fast gleich, sodass der Tabellenkopf (die Definition der el-table-column in jeder Spalte der Tabelle) hier gekapselt werden kann und die verschiedenen Stellen in eine Array-Objektstruktur gekapselt werden können. Anschließend wird der HTML-Teil durch die for-Schleife vervollständigt.

Vor dem Verpacken

 <Vorlage>
  <el-Tabelle
   :data="Tabellendaten"
   Stil="Breite: 100%">
   <el-table-column
    prop="Datum"
    Bezeichnung="Datum"
    Breite="180">
   </el-Tabellenspalte>
   <el-table-column
    Eigenschaft = "Name"
    Bezeichnung="Name"
    Breite="180">
   </el-Tabellenspalte>
   <el-table-column
    prop="Adresse"
    label="Adresse">
   </el-Tabellenspalte>
  </el-Tabelle>
 </Vorlage>

 <Skript>
  Standard exportieren {
   Daten() {
    zurückkehren {
     Tabellendaten: [{
      Datum: '2016-05-02',
      Name: 'Wang Xiaohu',
      Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
     }, {
      Datum: '2016-05-04',
      Name: 'Wang Xiaohu',
      Adresse: „Nr. 1517, Jinshajiang Road, Bezirk Putuo, Shanghai“
     }, {
      Datum: '2016-05-01',
      Name: 'Wang Xiaohu',
      Adresse: „Nr. 1519, Jinshajiang Road, Bezirk Putuo, Shanghai“
     }, {
      Datum: '2016-05-03',
      Name: 'Wang Xiaohu',
      Adresse: „Nr. 1516, Jinshajiang Road, Bezirk Putuo, Shanghai“
     }]
    }
   }
  }
 </Skript>

Aussehen der Tabelle

Nach dem Verpacken

<Vorlage>
 <el-table :data="tableData" style="width: 100%">
  <template v-for="(Element, Schlüssel) im Header">
   <el-table-column
    :Schlüssel="Schlüssel"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :Breite="itm.width ? itm.width : null"
   >
   </el-Tabellenspalte>
  </Vorlage>
 </el-Tabelle>
</Vorlage>

<Skript>
Standard exportieren {
 Daten() {
  zurückkehren {
   Kopfzeile: [
    { Eigenschaft: "Datum", Bezeichnung: "Datum", Breite: "180" },
    { Eigenschaft: "Name", Bezeichnung: "Name", Breite: "180" },
    { prop: "Adresse", label: "Adresse" }
   ],
   Tabellendaten: [
    {
     Datum: "2016-05-02",
     Name: "Wang Xiaohu",
     Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
    },
    {
     Datum: "04.05.2016",
     Name: "Wang Xiaohu",
     Adresse: „Nr. 1517, Jinshajiang Road, Bezirk Putuo, Shanghai“
    },
    {
     Datum: "2016-05-01",
     Name: "Wang Xiaohu",
     Adresse: „Nr. 1519, Jinshajiang Road, Bezirk Putuo, Shanghai“
    },
    {
     Datum: "2016-05-03",
     Name: "Wang Xiaohu",
     Adresse: „Nr. 1516, Jinshajiang Road, Bezirk Putuo, Shanghai“
    }
   ]
  };
 }
};
</Skript>

Jetzt sind die Daten noch relativ klein und der Vorteil der Kapselung von Komponenten ist möglicherweise nicht offensichtlich, aber im Vergleich zum vorherigen Code sieht die Logik hier klarer aus und beim Ändern der Spalte können Sie die Kopfdaten in den Daten direkt ändern, ohne im HTML-Code „operieren“ zu müssen (￣▽￣)／. Das Obige ist die einfachste Kapselung. Genau genommen ist es nur eine einfache Extraktion der Datenstruktur im Code. Im normalen Geschäftsleben muss es mehr als eine so einfache Kapselung geben. Das Folgende ist der entscheidende Punkt ─━ _ ─━✧

2. el-tbale Code - komplexe Kapselung

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::

el-table echte Sekundärverpackung

Quellcode für Sekundärverpackungen

<Vorlage>
 <el-Tabelle
  empty-text="Noch keine Daten"
  ref="Tabelle"
  :data="Tabellenliste"
  Grenze
  Streifen
  fit
  Aktuelle Zeile hervorheben
  :Höhe="inTabellenhöhe"
  @selection-change="AuswahlÄnderung"
  @row-click="Zeilenklick"
 >
  <!-- Auswahlfeld -->
  <el-table-column
   v-if="Auswählen"
   Typ="Auswahl"
   fest="links"
   Breite="55"
   ausrichten="zentrieren"
  />
  <template v-for="(itm, idx) im Header">
   <!-- Spalte für Sonderverarbeitung -->
   <el-table-column
    v-if="itm.render"
    :Schlüssel="idx"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :Breite="itm.width ? itm.width : null"
    :sortierbar="itm.sortierbar ? itm.sortierbar : false"
    :align="itm.align ? itm.align : 'Mitte'"
    :fest="itm.fest? itm.fest: null"
    :show-overflow-tooltip="itm.tooltip"
    Mindestbreite = "50"
   >
    <template slot-scope="Umfang">
     <Ex-Slot
      :render="itm.render"
      :Zeile="Umfang.Zeile"
      :index="Umfang.$index"
      :Spalte="itm"
     />
    </Vorlage>
   </el-Tabellenspalte>
   <!-- Normale Spalte -->
   <el-table-column
    v-sonst
    :Schlüssel="idx"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :Breite="itm.width ? itm.width : null"
    :sortierbar="itm.sortierbar ? itm.sortierbar : false"
    :align="itm.align ? itm.align : 'Mitte'"
    :fest="itm.fest? itm.fest: null"
    :formatter="itm.formatter"
    :show-overflow-tooltip="itm.tooltip"
    Mindestbreite = "50"
   />
  </Vorlage>
 </el-Tabelle>
</Vorlage>

<Skript>
// Komponente für benutzerdefinierten Inhalt var exSlot = {
 funktional: wahr,
 Requisiten: {
  Zeile: Objekt,
  rendern: Funktion,
  Index: Nummer,
  Spalte: {
   Typ: Objekt,
   Standard: null
  }
 },
 rendern: (h, Kontext) => {
  Konstante Parameter = {
   Zeile: Kontext.Eigenschaften.Zeile,
   Index: Kontext.Props.Index
  };
  wenn (Kontext.Props.Spalte) Params.Spalte = Kontext.Props.Spalte;
  gibt Kontext.Props.Render (h, Parameter) zurück;
 }
};

Standard exportieren {
 Komponenten: { exSlot },
 Requisiten: {
  Tabellenliste: {
   Typ: Array,
   Standard: () => []
  },
  Kopfzeile: {
   Typ: Array,
   Standard: () => []
  },
  wählen: {
   Typ: Boolean,
   Standard: () => false
  },
  Höhe:
   Typ: [Zahl, Zeichenfolge, Funktion],
   Standard: () => null
  }
 },
 Daten() {
  zurückkehren {
   inTableHeight: null
  };
 },
 erstellt() {
  //Diese Phase kann die übergebenen Parameter der übergeordneten Komponente empfangen. this.inTableHeight = this.height;
 },
 montiert() {
  dies.$nextTick(() => {
   //Tabellenhöhe passt sich der Browsergröße an this.changeTableHight();
   wenn (!diese.Höhe) {
    fenster.onresize = () => {
     dies.changeTableHight();
    };
   }
  });
 },
 zerstört() {
  //Hochadaptives Ereignis-Logout-Fenster.onresize = null;
 },
 betrachten:
  /**
   * Hohe Anpassungsfähigkeit an Datenänderungen */
  Tabellenliste() {
   dies.$nextTick(() => {
    dies.changeTableHight();
   });
  }
 },
 Methoden: {
  /**
   *Änderung nach Auswahl des Auswahlfeldes, Ereignisverteilung */
  AuswahlÄnderung(Auswahl) {
   this.$emit("Auswahländerung", Auswahl);
  },
  /**
   * Klickereignis */
  rowClick(Zeile, Spalte, Ereignis) {
   this.$emit("Zeilenklick", Zeile, Spalte, Ereignis);
  },
  /**
   * Höhenadaptiv* Wenn die Anzeigefläche der Tabelle kleiner als 460 Pixel ist, wird sie mit 460 Pixel angezeigt. Wenn sie größer ist, wird die Höhe ausgefüllt*/
  ändereTischhöhe() {
   wenn (diese.Höhe) {
    //Wenn eine Höhe übergeben wurde, brechen Sie die adaptive this.inTableHeight = this.height ab;
    dies.$refs.table.doLayout();
    zurückkehren;
   }
   let tableHeight = window.innerHeight || document.body.clientHeight;
   //Höheneinstellung let disTop = this.$refs.table.$el;
   //Wenn sich oberhalb der Tabelle Elemente befinden, subtrahieren Sie diese Höhen, um sie an das Fenster anzupassen. 66 ist der leere Teil darunter. tableHeight -= disTop.offsetTop + 66;
   wenn (disTop.offsetParent) Tabellenhöhe -= disTop.offsetParent.offsetTop;
   this.inTableHeight = Tabellenhöhe < 460? 460: Tabellenhöhe;
   //Tabelle neu zeichnen this.$refs.table.doLayout();
  }
 }
};
</Skript>
<Stil></Stil>

Erklärung der Verpackungscodes

Das Obige ist der Code, den ich gekapselt habe. Einige Eigenschaften oder Methoden werden nicht verwendet, deshalb habe ich die entsprechenden Methoden und Eigenschaften nicht gekapselt. Wenn Sie die entsprechenden Stellen in Ihrer Entwicklung benötigen, können Sie sie einfach ausfüllen. Als ich die Tabelle gekapselt habe, habe ich aus Kompatibilitätsgründen hier den ternären Operator verwendet. Wenn das entsprechende Attribut nicht übergeben wird, wird ein Standardwert angegeben. Beispielsweise habe ich das Attribut „align“ standardmäßig so eingestellt, dass es zentriert ist. Es gibt auch Methoden. In Bezug auf Methodenreferenzen in der Tabelle besteht die offizielle Methode tatsächlich darin, das Ereignis $emit zu verwenden, um die entsprechenden Parameter und Methodennamen auf die gleiche Weise an die übergeordnete Komponente zu verteilen. Auf diese Weise kann die übergeordnete Komponente auf die offizielle Dokumentation des Elements verweisen, um diese Methoden zu verwenden. Ich habe es nur einmal in der Komponente weitergeleitet. Ich habe nicht zu viele Methoden verwendet, als ich es selbst geschrieben habe, also habe ich nur ein oder zwei gekapselt. Sie können sie bei Bedarf selbst hinzufügen. Zusätzlich zu den beiden oben genannten Paketen gibt es eine spezielle Stelle, an der das Kontrollkästchen nicht in die Schleife eingefügt werden kann, da sonst ein Fehler auftritt. Möglicherweise liegt ein Indexproblem vor. Daher verwende ich einen separaten Parameter, um zu steuern, ob das Auswahlfeld angezeigt werden soll. Darüber hinaus erfordern die Produkte des Unternehmens, dass sich die Tabelle an die Höhe der Seite anpassen kann. Ich habe diese Funktion auch lange Zeit modifiziert. 460 ist die Mindesthöhe. Alles zur Höhenanpassung befindet sich in der Methode changeTableHight(). Wenn diese Funktion nicht benötigt wird, löschen Sie einfach die Funktion und alle Stellen, die darauf verweisen.

Höhe: Wenn dieses Attribut nicht übergeben wird, ist die Tabellenhöhe wie oben beschrieben adaptiv. Mit diesem Attribut kann die Höhe der Tabelle angegeben werden.
Formatierer: Diese Eigenschaft ist ungültig, wenn ein Slot in einer Spalte verwendet wird, daher habe ich zwei Spalten eingerichtet. Wenn es eine Rendermethode gibt, die angibt, dass die Zelle Code einbetten muss, wird eine spezielle Spalte verwendet, andernfalls wird eine normale Spalte verwendet, sodass Formatierer und Render nicht gleichzeitig verwendet werden können.

Rendern: Endlich sind wir beim kritischsten Teil angekommen (￣▽￣)／. Dies ist für mich die größte Schwierigkeit bei der Kapselung der Tabelle. Für mich ist Rendern ein virtueller Knoten. Wenn die DOM- und CSSOM-Bäume in den Renderbaum integriert werden, wird der Code geändert.

Das Obige ist meine ausführliche Erklärung zum Einkapseln der Tabelle. Es kann einige Auslassungen geben. Schließlich habe ich durch das Einkapseln dieser Tabelle viel gelernt, sodass einige Stellen möglicherweise nicht klar oder vorher nicht richtig erklärt wurden. Ich hoffe, Sie können mich korrigieren.

3. Übergeordnete Komponenten verweisen auf gekapselte Komponenten

Ob eine so lange gekapselte Komponente noch nützlich ist, kann man natürlich erst nach ihrer Verwendung wissen. Bezüglich Referenzen muss man die Komponente zunächst am Referenzort registrieren. Wenn sie global registriert wurde, kann man die lokale Registrierung ignorieren. Auf die Registrierung von Komponenten werde ich hier nicht näher eingehen (oﾟ▽ﾟ)o. Ich habe die globale Registrierung verwendet, sodass ich hier direkt meine eigenen gekapselten Komponenten eingeführt habe.

<Vorlage>
 <div Klasse="hallo">
  <xd-table :table-list="tableData" :header="header" height="300"></xd-table>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten() {
  zurückkehren {
   Kopfzeile: [
    { Eigenschaft: "w", Bezeichnung: "w" },
    { Eigenschaft: "x", Bezeichnung: "x",
     Formatierer: (Zeile) => {
      gibt row.x.toFixed(3) zurück;
     },
    },
    { Eigenschaft: "d", Bezeichnung: "d",
     Formatierer: (Zeile) => {
      gibt row.d.toFixed(2) zurück;
     },
    },
    {
     Bezeichnung: "Operation",
     rendern: (h, Daten) => {
      zurückkehren (
       <el-Schaltfläche
        Typ="primär"
        beiKlick={() => {
         dies.handleClick(Datenzeile);
        }}
       >
        Klicken Sie hier, um Zeilendaten abzurufen</el-button>
      );
     },
    },
   ],
   Tabellendaten: [
    { w: 1, x: 99,25123, d: 0,23892 },
    { w: 1, x: 255,6666, d: 0,99134 },
   ],
  };
 },
 Methoden: {
  handleClick(Zeile) {
   konsole.log(Zeile);
  },
 },
};
</Skript>

Denken Sie daran, sich zu registrieren, bevor Sie auf eine Komponente verweisen. Hier verwende ich nur einige Eigenschaften, und die anderen Eigenschaften werden nicht verwendet, da es sich um eine Demo handelt. Der Hauptzweck besteht darin, die Methode zum Rendern eingebetteten Codes anzuzeigen, und der andere darin, die offizielle Formatierungsmethode zu verwenden.
Eine Sache, auf die Sie achten müssen, ist, dass ich beim Rendern die JSX-Vorlagensyntax verwendet habe. Hier müssen Sie die JSX-Syntax im VUE-Projekt separat konfigurieren. Wenn Sie JSX nicht verwenden möchten, können Sie es direkt schreiben. Da der eingebettete Vorlagencode, der ohne JSX-Syntax geschrieben wurde, schwer zu lesen ist, werde ich ihn nicht zeigen. Ich persönlich empfehle die Verwendung der JSX-Syntax, obwohl die Verwendungsmethode an einigen Stellen leicht von der nativen Vue abweicht.

Screenshots von Effekten

Abschluss

Diesmal habe ich fast einen halben Monat gebraucht, um die Vue-Komponente zu kapseln, vom ersten Kontakt über die Entdeckung der Fehler bis hin zur Änderung. Nach einigem Hin und Her habe ich die Kapselung schließlich so optimiert, dass sie in dieser sekundären Kapselungskomponente angezeigt wird. Für Leute, die mit Vue und Element vertraut sind, ist diese Kapselung vielleicht eigentlich sehr einfach, aber für mich ist dies eine der besseren Komponenten, die ich während dieses Praktikums gekapselt habe. Natürlich habe ich neben der Kapselung dieser Komponente auch andere Dinge zu tun. Es ist unmöglich für mich, die Arbeit für das Unternehmen aufzugeben (hahahaha︿(￣︶￣)︿). Kurz gesagt, ich habe beim Kapseln von Komponenten viel gelernt, was ein großer Fortschritt ist, also werde ich einen Blog schreiben, um dies aufzuzeichnen.

Dies ist das Ende dieses Artikels über die Sekundärverpackungsimplementierung des Elements el-table (mit Anpassung der Tabellenhöhe). Weitere relevante Sekundärverpackungsinhalte zum Element el-table 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!