So kapseln Sie die Tabellenkomponente von Vue Element

So kapseln Sie die Tabellenkomponente von Vue Element

Beim Kapseln von Vue-Komponenten werde ich weiterhin funktionale Komponenten funktionsübergreifend verwenden. Bei funktionalen Komponenten können wir uns das wie eine Funktion in einer Komponente vorstellen, der Eingabeparameter ist der Renderkontext und der Rückgabewert ist das gerenderte HTML (VNode). Es eignet sich besser für Situationen, in denen die äußere Komponente nur eine logische Kapselung der inneren Komponente ist und die gerenderte Vorlagenstruktur sich nicht stark ändert oder erweitert und zustands- und instanzenlos sein muss. Zustandslos bedeutet, dass es keine Vue-Lebenszyklusfunktionen wie Erstellen, Mounten und Aktualisieren hat. Instanzenlos bedeutet, dass es keine reagierenden Daten und diesen Kontext hat.

Beginnen wir mit einem einfachen Beispiel einer funktionalen Vue-Komponente und stellen sie dann im Folgenden ausführlich vor.

Standard exportieren {
 funktional: wahr,
 Requisiten: {},
 rendern(Element erstellen, Kontext) {
   returniere createElement('span', 'Hallo Welt')
 }
}

Vue bietet einen Funktionsschalter. Wenn dieser auf „true“ gesetzt ist, kann die Komponente in eine zustandslose, instanzenfreie Funktionskomponente umgewandelt werden. Da es sich lediglich um eine Funktion handelt, ist der Rendering-Overhead relativ gering.

Die Render-Funktion in der Funktionskomponente bietet zwei Parameter: createElement und context. Lassen Sie uns zunächst den ersten Parameter, createElement, verstehen.

Einfach ausgedrückt wird createElement zum Erstellen eines virtuellen DOM-Knotens (VNode) verwendet. Es empfängt drei Parameter. Der erste Parameter kann eine DOM-Knotenzeichenfolge, eine Vue-Komponente oder eine Funktion sein, die eine Zeichenfolge oder eine Vue-Komponente zurückgibt. Der zweite Parameter ist ein Objekt, das optional ist und die zum Rendern der Komponente erforderlichen Parameter definiert. Der dritte Parameter ist ein untergeordneter virtueller Knoten, der eine von der Funktion createElement erstellte Komponente, eine normale Zeichenfolge wie „Hallo Welt“, ein Array oder eine Funktion sein kann, die eine Zeichenfolge oder eine Vue-Komponente zurückgibt.

Zu createElement sind einige Dinge zu beachten:

  • Wenn der erste Parameter von createElement eine Komponente ist, kann der dritte Parameter weggelassen werden und ist ungültig, auch wenn er geschrieben wird.
  • Die Renderfunktion kann auf die Ereignisse hören, die von der Komponente $emit im On-Ereignis ausgegeben werden.
  • In Versionen vor 2.3.0 war die Option „Props“ erforderlich, wenn eine Funktionskomponente Props erhalten wollte. In Version 2.3.0 und höher können Sie die Props-Option weglassen und alle Attribute der Komponente werden automatisch und implizit als Props aufgelöst.

Der zweite Parameter von Render in funktionalen Komponenten ist der Kontext. Auf Daten, Requisiten, Slots, untergeordnete Elemente und übergeordnete Elemente kann über den Kontext zugegriffen werden.

Wenn Sie in Version 2.5.0 und höher Einzeldateikomponenten verwenden, können vorlagenbasierte Funktionskomponenten wie folgt deklariert werden: <funktionale Vorlage></Vorlage>. Wenn jedoch die Renderfunktion in der Vue-Komponente vorhanden ist, kompiliert der Vue-Konstruktor die Renderfunktion nicht aus der HTML-Vorlage, die aus der Vorlagenoption oder dem durch die el-Option angegebenen Montageelement extrahiert wurde. Das heißt, die Vorlagen- und Renderfunktionen können nicht gleichzeitig in einer Komponente vorhanden sein. Wenn eine Komponente eine Vorlage hat, wird die Renderfunktion nicht ausgeführt, selbst wenn eine Renderfunktion vorhanden ist, da die Vorlagenoption eine höhere Priorität als die Renderoption hat.

An diesem Punkt ist die Einführung in die funktionalen Komponenten von Vue fast abgeschlossen. Schauen wir uns an, wie die Tabellenkomponente von Element durch funktionale Komponenten gekapselt wird.

Effektbild:

1. Gekapselte Tabellenkomponente:

<Vorlage>
 <div>
  <el-table :data="cfg.data" style="width: 100%" v-on="cfg.on" v-bind="attrs" v-loading="wird geladen">
   <el-table-column v-if="cfg.hasCheckbox" v-bind="selectionAttrs" Typ="Auswahl" Breite="55" Label="xx" />
   <el-table-column v-for="n in cfg.headers" :prop="n.prop" :label="n.label" :key="n.prop" v-bind="{...columnAttrs, ...n.attrs}">
    <template slot-scope="{row}">
     <slot :name="n.prop" :row="row"><Zelle :config="n" :data="row" /></slot>
    </Vorlage>
   </el-Tabellenspalte>
  </el-Tabelle>
  <el-pagination
   Klasse = "Paginierung"
   v-if="Seite anzeigen"
   Layout = "Gesamt, Größen, Zurück, Pager, Weiter, Jumper"
   :Seitengrößen="[2, 3, 6, 11]"
   :Seitengröße="Seitengröße"
   :total="Seite.total"
   :current-page="Seite.Seite"
   @current-change="Seite laden"
   @size-change="Größenänderung"
  />
 </div>
</Vorlage>

<Skript>
Zelle aus „./cell“ importieren

Standard exportieren {
 Komponenten:
  Zelle,
 },
 Requisiten: {
  Konfiguration: Objekt,
 },
 Daten(){
  zurückkehren {
   wird geladen: wahr,
   Spaltenattribute: {
    ausrichten: 'links',
    größenveränderbar: false,
   },
   cfg: {
    ein: this.getTableEvents(),
    Attribute: {
     Grenze: wahr,
		   Streifen: wahr,
    },
    Daten: [],
    ...diese.config,
   },
   Seite: {
    Größe: this.config.size || 10,
    Seite: 1,
    gesamt: 0,
   },
   geprüft: [],
  }
 },
 erstellt(){
  dies.laden();
 },
 berechnet: {
  Auswahlattribute(){
   let {selectable, reserveSelection = false} = diese.config || {}, obj = {};
   // Kann das Kontrollkästchen ausgewählt werden, wenn (selectable und typeof selectable == 'function') {
    Objekt.assign(obj, {
     wählbar,
    })
   }
   //reserve-selection ist nur für Spalten mit Typ=selection gültig. Der Typ ist Boolean. Wenn true, bleiben die zuvor ausgewählten Daten nach der Aktualisierung der Daten erhalten (Zeilenschlüssel muss angegeben werden)
   wenn(ReserveAuswahl){
    Objekt.assign(obj, {
     'Reserve-Auswahl': Reserve-Auswahl,
    })
   }

   gibt Objekt zurück;
  },
  attrs(){
   let {config: {spanMethod, rowKey}, cfg: {attrs}} = dies;
   // Zellen zusammenführen - spanMethod ist die Methode zum Zusammenführen von Zellen, die von der übergeordneten Komponente übergeben wird. Weitere Informationen finden Sie unter Zellen zusammenführen des Elements, wenn (spanMethod && typeof spanMethod == 'function') {
    Objekt.assign(attrs, {
     'span-method': spanMethod,
    })
   }
   // Um ​​mehrere Seiten einer Tabelle auszuwählen, müssen Sie den Zeilenschlüssel und die Reserveauswahl festlegen. Die Reserveauswahl kann und muss nur für die Spalte „el-table“ festgelegt werden, deren Typ „Auswahl“ ist, wenn (Zeilenschlüssel und Typ von Zeilenschlüssel == „Funktion“). {
    Objekt.assign(attrs, {
     'Zeilenschlüssel': Zeilenschlüssel,
    })
   }

   Attribute zurückgeben;
  },
  Seite anzeigen(){
   let {Größe, Gesamt} = diese.Seite;
   Rückgabegröße < Gesamtgröße;
  },
 },
 Methoden: {
  getTableEvents(){
   let {hasCheckbox = false} = diese.config || {}, Ereignisse = {}, _this = dies;
   wenn(hatKontrollkästchen){
    // Ereignis binden Object.assign(events, {
     'Auswahl ändern'(v){
     	_this.checked = v;
     },
    });
   }

   Rückgabeereignisse;
  },
  // Hole die markierte Zeile getChecked(){
   gib dies zurück.überprüft;
  },
  // Daten anfordern load(p = {}){
   let { Größe, Seite } = diese.Seite, {loadData = () => Promise.resolve({})} = diese.config;
   dies.laden = wahr;
   // Die Parameter von loadData sind hier nur page und size, die für die Seiteneinteilung während der Initialisierung erforderlich sind. Was die anderen von der Schnittstelle benötigten Parameter betrifft, werden sie in loadData der übergeordneten Komponente übergeben loadData({...p, page, size}).then(({data, total}) => {
    this.cfg.data = Daten;
    diese.Seite.Seite = Seite;
    diese.seite.gesamt = gesamt;
    dies.laden = falsch;
   });
  },
  Seite laden(index){
   diese.seite.seite = index
   dies.laden();
  },
  Größenänderung(Größe){
   this.page.size = Größe
   dies.laden();
  },
  // Generell kann diese Methode aufgerufen werden, wenn man auf den Abfrage-Button klickt oder die Tabellenliste teilweise aktualisiert. Wenn keine Parameter übergeben werden, wird standardmäßig von der ersten Seite neu geladen (p = {}) {
   diese.Seite.Seite = 1
   dies.laden(p);
  },
 },
}
</Skript>

2. Cell.js für jede Spalte der Übersichtstabelle:

importiere * als Komponenten aus „./components“;
leer lassen = '-'
Standard exportieren {
 Requisiten: {
  Konfiguration: Objekt,
  Daten: Objekt,
 },
 funktional: wahr,
 rendern: (h, c) => {
  let {props: {config = {}, data = {}}} = c, {prop, Typ = 'Standard'} = config, Wert = data[prop] || config.value, isEmpty = Wert === '' || Wert === undefiniert;
  gibt isEmpty zurück? h(Komponenten.Standard, {Eigenschaften: {Wert: leer}}) : h(Komponenten[Typ], {Eigenschaften: {Wert, leer, Daten, ...Konfiguration}});
 }
}

3. Diese Kapselung trennt die Darstellung jeder Spalte in mehrere Vue-Komponenten und führt sie schließlich zum Abgleich in einer Datei „components.js“ zusammen.

1) Integrieren Sie die Datei components.js:

Datum aus „./Date“ importieren;
importiere Standard aus „./Default“;
Währung aus „./Currency“ importieren;
importiere Enum aus „./Enum“;
Aktion aus „./Action“ importieren;
Link aus „./Link“ importieren;
Format aus „./Format“ importieren;
importiere Popover aus „./Popover“;

exportieren {
 Standard,
 Datum,
 Währung,
 Aufzählung,
 Aktion,
 Link,
 Format,
 Popover,
}

2) Datumsspalte Date.vue

<funktionale Vorlage>
  <span>{{props.value | Datum(props.format)}}</span>
</Vorlage>

3) Standardspalte Default.vue

<funktionale Vorlage>
  <span>{{props.value}}</span>
</Vorlage>

4) Tausendstel des Betrags in Currency.vue

<funktionale Vorlage>
  <span>{{props.value | Währung}}</span>
</Vorlage>

5) Spaltenzuordnung Enum.js

let mapIdAndKey = Liste => Liste.reduce((c, i) => ({...c, [i.key]: i}), {});

let STATUS = {
  Reihenfolge: mapIdAndKey([
    {
      ID: "Entwurf",
      Schlüssel: 'ERSTELLT',
      val: 'Nicht übermittelt',
    },
    {
      ID: "ausstehend",
      Schlüssel: 'IN_APPROVAL',
      val: 'Wird überprüft',
    },
    {
      ID: "Ablehnen",
      Taste: 'ABLEHNEN',
      val: 'Genehmigung abgelehnt',
    },
    {
      ID: "Ablehnen",
      Schlüssel: 'ABLEHNEN',
      val: 'Genehmigung abgelehnt',
    },
    {
      ID: "Zeichen",
      Schlüssel: 'CONTRACT_IN_SIGN',
      val: 'Vertragsunterzeichnung',
    },
    {
      ID: "signDone",
      Schlüssel: 'CONTRACT_SIGNED',
      val: 'Vertrag erfolgreich unterzeichnet',
    },
    {
      ID: "leihenErledigt",
      Schlüssel: 'VERLEIHT',
      val: 'Ausleihe erfolgreich',
    },
    {
      ID: "lendReject",
      Schlüssel: 'LOAN_REJECT',
      val: 'Kreditablehnung',
    },
    {
      ID: "Abbrechen",
      Taste: 'ABBRECHEN',
      val: 'Abbrechen erfolgreich',
    },
    {
      ID: "inLend",
      Schlüssel: 'IN_LOAN',
      val: 'Kreditgenehmigung in Bearbeitung',
    },
  ]),
  Monitor:MapIdAndKey([
    {
      Schlüssel: '00',
      val: 'Nicht überwacht',
    },
    {
      Schlüssel: '01',
      val: 'Überwachung',
    },
  ]),
}

Standard exportieren {
  funktional: wahr,
  rendern(h, {Eigenschaften: {Wert, Enumeration, leer}, übergeordnetes Element}){
    let enums = Object.assign({}, STATUS, parent.$store.getters.dictionary),
      {name = '', getVal = (Werte, v) => Werte[v]} = Enum, _value = getVal(enums[name], Wert);
      
    if( _value === undefiniert) return h('span', _value === undefiniert ? leer : _value);

    lass {id, val} = _Wert;
    gibt h('span', {staticClass: id}, [h('span', val)]); zurück.
  }
}

6) Aktion.js

const getAcitons = (h, Wert, Daten) => {
 let Ergebnis = Wert.Filter(n => {
  lass {filter = () => true} = n;
  gibt filter.call(n, data) zurück;
 });

 Ergebnis zurückgeben.Map (a => h (,,span', {Klasse:,,btn', ein: {Klick: () => a.Klick(Daten)}, Schlüssel: a.Prop}, a.Label))
}

Standard exportieren {
 funktional: wahr,
 rendern: (h, {Eigenschaften: {Wert, Daten}}) => {
  returniere h('div', {Klasse: 'Aktion'}, getAcitons(h, Wert, Daten))
 },
}

7) Spalte Link.vue mit springbaren Links

<Vorlage>
 <router-link :to="{ Pfad, Abfrage: Parameter }">{{Wert}}</router-link>
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten: {
  Daten: Objekt,
  Wert: String,
  Abfrage: {
   Typ: Funktion,
   Standard: () => {
    zurückkehren {
     Weg: '',
     Nutzlast: {}
    }
   }
  },
 },
 berechnet: {
  //Routenpfad
  Weg(){
   const { Pfad } = diese.Abfrage(diese.Daten)
   Rückweg
  },
  Parameter(){
   const { Nutzlast } = diese.Abfrage(diese.Daten)
   Nutzlast zurückgeben
  },
 },
}
</Skript>

8) Passen Sie das Datenformat an, das Sie anzeigen möchten Format.vue

<funktionale Vorlage>
 <div v-html="Eigenschaften.format(Eigenschaften.value, Eigenschaften.data)" />
</Vorlage>

9) Wenn zu viel Inhalt vorhanden ist, muss dieser weggelassen werden. Nach dem Bewegen der Maus wird ein Eingabeaufforderungsfenster angezeigt, in dem die Spalte Popover.vue mit dem gesamten Inhalt angezeigt wird.

<funktionale Vorlage>
 <el-popover
  Platzierung="Top-Start"
  Breite="300"
  Auslöser="schweben"
  Popper-Klasse = "Popover"
  :Inhalt="Eigenschaften.Wert">
  <span slot="Referenz" class="popover-txt">{{props.value}}</span>
 </el-popover>
</Vorlage>
<Stilbereich>
.popover-txt{
 Überlauf: versteckt;
 Textüberlauf: Auslassungspunkte;
 Leerzeichen:nowrap;
 Anzeige: Block;
 Cursor: Zeiger;
}
</Stil>

Wie Sie dem obigen Code entnehmen können, habe ich sowohl funktionale Komponenten basierend auf dem Renderfunktionstyp als auch funktionale Komponenten basierend auf Vorlagen verwendet. Dies dient hauptsächlich der Vereinfachung der Kapselung. Schließlich ist die Verwendung von Render, der Funktion, die dem Compiler am nächsten ist, etwas mühsam und nicht so praktisch wie die Verwendung funktionaler Komponenten basierend auf Vorlagen.

4. Verwenden Sie die gekapselte Tabellenkomponente

1) Keine Slots verwenden:

<Vorlage>
 <div Stil="Rand: 20px;">
  <el-button type="primary" v-if="excelExport" @click="download">Ausgewählte Tabellendaten abrufen</el-button>
  <Tabelle :config="config" ref="Tabelle" />
 </div>
</Vorlage>

<Skript>
Tabelle aus '@/components/table' importieren

Standard exportieren {
 Komponenten:
  Tisch,
 },
 Daten() {
  zurückkehren {
   Konfiguration: {
    Überschriften: [
     {prop: 'contractCode', label: 'Geschäftsnummer', attrs: {width: 200, align: 'center'}},
     {prop: 'payeeAcctName', label: 'Kontoname des Zahlungsempfängers', Typ: 'Link', Abfrage: Zeile => this.query(Zeile), attrs: {width: 260, align: 'right'}},
     {prop: 'tradeAmt', label: 'Zahlungsbetrag', type: 'Währung'},
     {prop: 'status', label: 'Betriebsstatus', Typ: 'Enum', Enum: {name: 'order'}},
     {prop: 'statistic', label: 'Warnstatistik', type: 'Format', format: val => this.format(val)}, //Passen Sie das Datenformat an, das Sie anzeigen möchten {prop: 'reason', label: 'Reason', type: 'Popover'},
     {prop: 'payTime', label: 'Zahlungszeitpunkt', type: "Datum", format: 'yyyy-MM-dd hh:mm:ss'}, //Wenn das Format nicht festgelegt ist, ist das Standarddatumsformat yyyy/MM/dd
     {prop: 'monitorStatus', label: 'Aktueller Überwachungsstatus', type: 'Enum', Enum: {name: 'monitor'}},
    ].concat(diese.getActions()),
    //Listendaten über die Schnittstelle abrufen - der Parameter p ist hier der Paging-Parameter, der von der untergeordneten Komponente loadData übergeben wird: p => request.post('permission/list', {...this.setParams(), ...p}),
    hatCheckbox: true,
    wählbar: dies.wählbar,
    Reserveauswahl: false,
    Zeilenschlüssel: Zeile => Zeilen-ID,
   },
   Status: "01",
   Berechtigung: ["Handle", "Pass", "Refuse", "ReApply", "Export"]
  }
 },
 berechnet: {
  handhaben() {
   gibt diese.Berechtigung.einige zurück (n => n == "Handle");
  },
  passieren() {
   gib diese.Berechtigung.einige zurück (n => n == "pass");
  },
  ablehnen() {
   returniere diese.Berechtigung.einige(n => n == "ablehnen");
  },
  verweigern() {
   returniere diese.Berechtigung.einige(n => n == "ablehnen");
  },
  excelExport(){
   returniere diese.Berechtigung.ein(n => n == "Handle") und diese.Berechtigung.ein(n => n == "Export");
  },
 },
 Methoden: {
  getActions(){
   return {prop: 'Aktion', Name: 'Operation', Typ: "Aktion", Wert: [
    {label: "Anzeigen", click: data => {console.log(data)}},
    {label: "Handhabung", Klick: Daten => {}, Filter: ({status}) => Status == 'ERSTELLT' && this.handle},
    {label: "Pass", Klick: Daten => {}, Filter: ({status}) => Status == 'PASS' && this.pass},
    {label: "Ablehnen", click: data => {}, filter: ({status}) => status == 'ABLEHNEN' && this.reject},
    {label: "Ablehnen", click: data => {}, filter: ({status}) => status == 'ERSTELLT' && this.refuse},
   ]}
  },
  setParams(){
   zurückkehren {
    Name: 'Test',
    Status: '01',
    Typ: 'ERSTELLT',
   }
  },
  Abfrage(Zeile){
   zurückkehren {
    Pfad: '/otherElTable', // Routenpfad
    Nutzlast: {
     ID: Zeilen-ID,
     Typ: "Link"
    }
   }
  },
  format(Wert){
   lass str = '';
   val.forEach(t => {
    str += '<span style="margin-right:5px;">' + t.total + '</span>';
   })
   gibt str zurück;
  },
  auswählbar({status}){
   Rückgabestatus == "ABLEHNEN" ? false : true
  },
  herunterladen(){
   Konsole.log(diese.$refs.table.getChecked())
  },
 },
};
</Skript>
<Stil>
.action span{margin-right:10px;color:#359C67;cursor: pointer;}
</Stil>

2) Verwenden von Slots:

 <Tabelle :config="config" ref="table">
  <template #statistic="{row}">
   <div v-html="loop(row.statistic)"></div>
  </Vorlage>
  <template #payeeAcctName="{row}">
   {{row.payeeAcctName}}
  </Vorlage>
  <template #tradeAmt="{row}">
   {{row.tradeAmt | Währung}}
  </Vorlage>
  <template v-slot:reason="{row}">
   <template v-if="!row.reason">-</template>
   <el-popover
    v-sonst
    Platzierung="Top-Start"
    Breite="300"
    Auslöser="schweben"
    Popper-Klasse = "Popover"
    :Inhalt="Zeile.Grund">
    <span slot="Referenz" class="popover-txt">{{row.reason}}</span>
   </el-popover>
  </Vorlage>
  <template #payTime="{row}">
   {{row.payTime | Datum('yyyy-MM-dd hh:mm:ss')}}
  </Vorlage>
  <Vorlage #customize="{row}">
   {{anpassen(row.customize)}}
  </Vorlage>
  <template #opt="{row}">
   <div Klasse="Aktion">
    <span>Anzeigen</span>
    <span v-if="row.status == 'ERSTELLT' && handle">Griff</span>
    <span v-if="row.status == 'PASS' && pass">Bestanden</span>
    <span v-if="row.status == 'REJECT' && reject">Ablehnen</span>
    <span v-if="row.status == 'REFUSE' && reject">Ablehnen</span>
   </div>
  </Vorlage>
 </Tabelle>

<Skript>
Tabelle aus '@/components/table' importieren

Standard exportieren {
 Komponenten:
  Tisch,
 },
 Daten(){
  zurückkehren {
   Konfiguration: {
    Überschriften: [
     {prop: 'contractCode', label: 'Geschäftsnummer', attrs: {width: 200, align: 'center'}},
     {prop: 'payeeAcctName', label: 'Name des Empfangskontos', attrs: {width: 260, align: 'right'}},
     {prop: 'tradeAmt', label: 'Zahlungsbetrag'},
     {prop: 'status', label: 'Betriebsstatus', Typ: 'Enum', Enum: {name: 'order'}},
     {prop: 'Statistik', label: 'Frühwarnstatistik'},
     {prop: 'payTime', label: 'Zahlungszeitpunkt'},
     {prop: 'Grund', label: 'Grund'},
     {prop: 'monitorStatus', label: 'Aktueller Überwachungsstatus', type: 'Enum', Enum: {name: 'monitor'}},
     {prop: 'customize', label: 'Anzeige anpassen', type: 'Format', format: val => this.customize(val)},
     {prop: 'opt', label: 'Operation'},
    ],
    loadData: () => Promise.resolve({
     Daten: [
      {id: 1, Vertragscode: '', Zahlungsempfängerkontoname: 'Bank of China Shanghai Branch', Handelsbetrag: '503869.265', Status: '00', Zahlungszeit: 1593585652530,
       Statistik:[
        {Level: 3, Gesamt: 5},
        {Level: 2, Gesamt: 7},
        {Level: 1, Gesamt: 20},
        {Level: 0, Gesamt: 0}
       ],
       anpassen: ['China', 'Shanghai', 'Pudong New Area']
      },
      {id: 2, Vertragscode: ‚GLP-YG-B3-1111‘, Zahlungsempfängerkontoname: ‚China Post Shanghai Branch‘, Handelsbetrag: ‚78956,85‘, Status: ‚ERSTELLT‘, Zahlungszeit: 1593416718317, 
       Grund: „Die Eigenschaften von Popover sind denen von Tooltip sehr ähnlich. Sie wurden beide auf Basis von Vue-Popper entwickelt. Informationen zu wiederholten Eigenschaften finden Sie daher in der Dokumentation von Tooltip. In diesem Dokument werden sie nicht im Detail erläutert.“ ',
      },
      {id: 3, Vertragscode: „HT1592985730310“, Zahlungsempfängerkontoname: „China Merchants Bank Shanghai Branch“, Handelsbetrag: „963587123“, Status: „PASS“, Zahlungszeit: 1593420950772, Überwachungsstatus: „01“},
      {id: 4, Vertragscode: ‚pi239‘, Zahlungsempfängerkontoname: ‚Guangzhou Logistics Co., Ltd.‘, Handelsbetrag: ‚875123966‘, Status: ‚ABLEHNEN‘, Zahlungszeit: 1593496609363},
      {id: 5, Vertragscode: '0701001', Zahlungsempfängerkontoname: 'Construction Bank Shanghai Branch', Handelsbetrag: '125879125', Status: 'ABLEHNEN', Zahlungszeit: 1593585489177},
     ],
    }),
   },
   Berechtigung: ["Handle", "Pass", "Refuse", "ReApply", "Export"],
  }
 },
 berechnet: {
  handhaben() {
   gibt diese.Berechtigung.einige zurück (n => n == "Handle");
  },
  passieren() {
   gibt diese.Berechtigung.einige zurück (n => n == "pass");
  },
  ablehnen() {
   returniere diese.Berechtigung.einige(n => n == "ablehnen");
  },
  verweigern() {
   returniere diese.Berechtigung.einige(n => n == "ablehnen");
  },
  excelExport(){
   returniere diese.Berechtigung.ein(n => n == "Handle") und diese.Berechtigung.ein(n => n == "Export");
  },
 },
 Methoden: {
  Abfrage(Zeile){
   zurückkehren {
    Pfad: '/otherElTable', // Routenpfad
    Nutzlast: {
     ID: Zeilen-ID,
     Typ: "Link"
    }
   }
  },
  Schleife(Wert){
   if(!val) return '-'
   lass str = '';
   val.forEach(t => {
    str += '<span style="margin-right:5px;">' + t.total + '</span>';
   })
   gibt str zurück;
  },
  anpassen(v){
   gib v zurück? v[0] + v[1] + v[2] : '-'
  }
 }
}
</Skript>

Es gibt zwei verschiedene Verwendungen: Die erste basiert nicht auf Slots, die zweite basiert auf Slots. Durch den Vergleich der beiden Methoden können wir sehen, dass bei der zweiten Methode für jede Spalte, die Slots verwendet, das Typfeld nicht mehr im Header-Array definiert ist. Selbst wenn der Typ definiert ist, funktioniert es nicht. Der Slot ist das, was funktioniert. Darüber hinaus wird concat nicht mehr verwendet, um eine Operationsspalte zu spleißen. Die Operationsspalte wird auch über Slots gerendert. Wenn jedoch viele Spalten in Form von Slots implementiert werden, wird die Seite meiner Meinung nach nicht so ordentlich aussehen.

Und noch etwas: Da wir die Implementierung der meisten Szenarien gekapselt haben, müssen bei ihrer Verwendung keine Slots verwendet werden. Versuchen Sie einfach, die Seite sauber zu halten. Wenn Sie wirklich der Meinung sind, dass die Verkettung einer Operationsliste nach dem Header-Array etwas umständlich ist, implementieren Sie die Operationsliste einfach in Form eines Slots. Die in diesem Blog erwähnten Slot-Implementierungen dienen lediglich dazu, Ihnen mehr Optionen zu bieten.

Abschließend noch etwas zur Implementierung der Tausendstel des Betrags und der Zeitstempelformatierung: Ich werde den Code hier nicht veröffentlichen, Sie können ihn selbst implementieren.

Vor kurzem habe ich wieder über die gekapselte Tabellenkomponente nachgedacht und mich gefragt, ob es andere Implementierungsmethoden gibt, die auf der ursprünglichen Kapselung basieren. Beispielsweise möchte ich keine Operationsspalte nach dem ursprünglich definierten Header-Array verketten, oder die Datenverarbeitungsmethode einer bestimmten Spalte der Tabelle ist nicht in den Methoden enthalten, die wir zuvor gekapselt haben, oder ich bin als Front-End-Entwickler, der diese Tabellenkomponente zum ersten Mal verwendet, nicht an Ihre Schreibweise gewöhnt. Kann ich einige Verarbeitungsmethoden selbst basierend auf Ihrer Kapselung schreiben? Die Antwort ist ja. Natürlich sagen wir, dass, da die Komponente gekapselt wurde, jeder einer Routine folgt, was Zeit und Mühe spart. Warum es nicht tun? Aber wenn wir es ehrlich gesagt aus der Perspektive des Lernens betrachten und der Idee, dass es besser ist, viele Fähigkeiten zu haben, dann wird sich mehr Lernen, mehr Denken und mehr Tun immer positiv auf unseren Fortschritt auswirken. Es ist nur so, dass wir im eigentlichen Entwicklungsprozess unser Bestes geben sollten, um eine Verpackungsmethode auszuwählen, und sich dann jeder an diese Vereinbarung halten sollte.

Tatsächlich ist diese Änderung, nachdem so viel Unsinn gesagt wurde, nicht sehr bedeutsam. Es werden lediglich Slots basierend auf dem Originalpaket hinzugefügt. Wenn Sie diesen Blog gelesen haben, müssen Sie sich daran erinnern, dass es in meinem gekapselten Code einen Codeabschnitt gibt, der speziell zum Verarbeiten jeder Datenspalte verwendet wird:
<Cell :config="n" :data="row" />
Ja, das ist es. Mehr möchte ich dazu nicht sagen, da ich es oben schon vorgestellt habe. Bei dieser Änderung verwenden wir hauptsächlich Slots.

Die Slot-API wurde auf der offiziellen VUE-Website und in verschiedenen Artikeln im Internet sehr deutlich erklärt. Sie kann grob in Standard-Slots (manche Leute nennen sie auch anonyme Slots), benannte Slots und Scoped-Slots unterteilt werden. Eine Einführung hierzu finden Sie auf der offiziellen Website oder in verschiedenen Artikeln im Internet. Diese Änderung nutzt hauptsächlich benannte Slots und Slots mit begrenztem Gültigkeitsbereich. Benannte Slots sind, wie der Name schon sagt, Slots mit Namen. Die Namen der Slots, die wir in dieser Kapselung verwenden, stammen aus den Eigenschaften jeder Spalte der Tabelle. Die Hauptrolle des Bereichsslots in dieser Kapselung besteht darin, Werte über den Slot der untergeordneten Komponente an die übergeordnete Komponente zu übergeben. Seine Implementierung ähnelt etwas der Übergabe von Werten durch die übergeordnete Vue-Komponente an die untergeordnete Komponente, außer dass die beiden Werte auf unterschiedliche Weise empfangen. Insgesamt ist diese Änderung sehr einfach umzusetzen. Legen Sie einfach eine weitere Schicht benannter Slots um <Cell :config="n" :data="row" /> .
<slot :name="n.prop" :row="row"><Cell :config="n" :data="row" /></slot>
Das ist es.

Als nächstes können wir die oben gestellten Fragen beantworten. Sehen wir uns die Antwort an:

<Tabelle :config="config" ref="table">
  <template #payTime="{row}">
   {{row.payTime | Datum('yyyy-MM-dd hh:mm:ss')}}
  </Vorlage>
  <Vorlage #customize="{row}">
   {{anpassen(row.customize)}}
  </Vorlage>
  <template #opt="{row}">
   <div Klasse="Aktion">
    <span>Anzeigen</span>
    <span v-if="row.status == 'ERSTELLT' && handle">Griff</span>
    <span v-if="row.status == 'PASS' && pass">Bestanden</span>
    <span v-if="row.status == 'REJECT' && reject">Ablehnen</span>
    <span v-if="row.status == 'REFUSE' && reject">Ablehnen</span>
   </div>
  </Vorlage>
</Tabelle>

Das Obige gilt für einige Sonderfälle. Wenn Sie die Methoden, die ich am Anfang beschrieben habe, nicht verwenden möchten, biete ich Ihnen einen anderen „Sonderservice“ an. Bitte beachten Sie: Wenn Sie Slots verwenden, um die Daten selbst darzustellen, müssen Sie im Header-Array die Darstellung der Tabellenüberschrift bereitstellen, ohne das Typfeld hinzuzufügen.
Als wir beispielsweise die Datumsspalte der Tabelle zum ersten Mal renderten, schrieben wir:
{prop: 'payTime', label: '付款時間', type: "Date", format: 'yyyy-MM-dd hh:mm:ss'}
Wenn Sie also Slots verwenden, um die Daten selbst zu rendern, sieht die Schreibweise hier folgendermaßen aus:
{prop: 'payTime', label: '付款時間'}
Außerdem haben wir zuvor die Operationsspalte definiert, indem wir nach dem Header-Array ein Array verkettet haben. Wenn Sie Slots verwenden, um die Daten selbst darzustellen, müssen Sie kein Array erneut verketten. Fügen Sie stattdessen einfach {prop: 'opt', label: '操作'} zum Header-Array hinzu.

Tatsächlich bedeutet diese Änderung, dass eine Schicht von Slots auf der ursprünglichen Basis neu verpackt wird. In Situationen, in denen wir die Daten nicht selbst verarbeiten müssen und nur die von der Schnittstelle zurückgegebenen Daten direkt anzeigen müssen, müssen wir bei Verwendung dieser gekapselten Tabellenkomponente keine spezielle Verarbeitung durchführen und sie nicht wie die Slots oben definieren. Wir müssen sie nur wie zuvor normal im Header-Array definieren. Wenn Sie aufgrund des Slots keinen benannten Slot oder Standardslot definieren, wird im Slot Folgendes angezeigt: <Cell :config="n" :data="row" /> eingeschlossen in den Slot-Tag-Slot.
Habe es?

Und noch etwas: Wenn Sie angeben, dass Sie keine Slots zur Verarbeitung von Spalten wie Datums- und Betragstausendstel verwenden möchten, können Sie trotzdem dem oben vorgestellten Slot-Prinzip folgen und es im Header-Array wie folgt definieren:

{prop: 'tradeAmt', label: 'Zahlungsbetrag', type: 'Währung'},
{prop: 'payTime', label: 'Zahlungszeitpunkt', type: "Datum"},

Nachdem ich dies geschrieben habe, möchte ich eigentlich sagen, dass selbst wenn Slots hinzugefügt werden, dies im Grunde keinen Einfluss auf die vorherigen Verwendungsmethoden hat. Sie können sie weiterhin nach Belieben verwenden. Ich biete Ihnen lediglich mehr Optionen.

Wenn Sie wirklich keine Slots verwenden möchten und die Seite übersichtlich halten wollen, ist es egal, ob Sie den <Cell :config="n" :data="row" />-Code mit einem Slot umschließen oder nicht. Sie können einfach die erste Methode verwenden, die ich oben vorgestellt habe.

Autor: Xiaohuai

Quelle: http://tnnyang.cnblogs.com

Oben finden Sie Einzelheiten zur Kapselung der Tabellenkomponente von Vue Element. Weitere Informationen zur Kapselung der Tabellenkomponente von Vue Element finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Verwendung der Vue3-Tabellenkomponente
  • Detailliertes Beispiel für die Kapselung der Tabellenkomponente von Vue Element
  • vxe-table Vue-Tabelle Tabellenkomponentenfunktion
  • Vue.js implementiert ein Funktionsbeispiel für eine sortierbare Tabellenkomponente
  • Detailliertes Beispiel zur Implementierung einer einfachen Tabellenkomponente in Vue
  • Vue feste Kopfzeile feste Spalte Klicktabellenkopfzeile sortierbare Tabellenkomponente
  • Detailliertes Beispiel für die Entwicklung einer Vue.js-Tabellenkomponente
  • Vue + elementui realisiert Mehrfachauswahl- und Suchfunktionen der Dropdown-Tabelle
  • Die Tabelle in vue+Element ist editierbar (Dropdown-Feld auswählen)
  • Vue implementiert Dropdown-Tabellenkomponente

<<:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 auf dem Mac

>>:  Detaillierte Erläuterung der Transaktionsisolierungsebenen der MySQL-Datenbank

Artikel empfehlen

Grafisches Tutorial zur Installation und Verwendung von MySQL 5.7.17

MySQL ist ein relationales Datenbankverwaltungssy...

Beispiele für die Verwendung der Operatoren && und || in JavaScript

Inhaltsverzeichnis Vorwort && Operator ||...

Analyse des Prozesses zum Bereitstellen von Python-Anwendungen in Docker-Containern

Einfache Anwendungsbereitstellung 1. Verzeichniss...

Detailliertes Beispiel einer MySQL-Unterabfrage

Unterabfrageklassifizierung Klassifizierung nach ...

Vue+echarts realisiert Fortschrittsbalken-Histogramm

In diesem Artikel wird der spezifische Code von v...

Linux-Checkup: Erfahren Sie mehr über Ihren Linux-Status (Netzwerk-E/A, Festplatte, CPU, Speicher)

Inhaltsverzeichnis 1. Kernbefehle 2. Allgemeine B...

Detaillierte Einführung in die Installations- und Konfigurationsregeln von Nginx

Inhaltsverzeichnis 1. Installation und Betrieb vo...

Das Vue-CLI-Framework implementiert eine Timer-Anwendung

Technischer Hintergrund Diese Anwendung verwendet...

Anfänger lernen einige HTML-Tags (3)

Verwandte Artikel: Anfänger lernen einige HTML-Ta...

Verwenden von jQuery zum Implementieren des Karusselleffekts

In diesem Artikel finden Sie den spezifischen Cod...

Beispielcode für die Verwendung von CSS cross-fade() zum Erzielen eines halbtransparenten Hintergrundbildeffekts

1. Anforderungsbeschreibung Bei einem bestimmten ...

So zeigen Sie im img-Tag in HTML nur die Bildmitte an (drei Methoden)

Derzeit gibt es drei Möglichkeiten, die Mitte ein...

So installieren Sie den Elasticsearch7.6-Cluster im Docker und legen ein Kennwort fest

Inhaltsverzeichnis Einige grundlegende Konfigurat...

MySQL-unabhängiger Index und gemeinsame Indexauswahl

Häufig fehlt das Verständnis für mehrspaltige Ind...

Detaillierte Erläuterung des virtuellen DOM in der Vue-Quellcodeanalyse

Warum brauchen wir virtuellen Dom? Virtual DOM wu...