Vue verwendet el-table, um Spalten und Zeilen dynamisch zusammenzuführen

Vue verwendet el-table, um Spalten und Zeilen dynamisch zusammenzuführen

In diesem Artikelbeispiel wird der spezifische Code von Vue mit el-table zum dynamischen Zusammenführen von Spalten und Zeilen zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Die Formularzusammenführung wurde vor einigen Tagen im Projekt benötigt, daher habe ich sie hier zur zukünftigen Verwendung aufgezeichnet.

Zuerst verwende ich el-table in element-ui. Das Dokument bietet die span-method-Methode zum Zusammenführen von Zeilen oder Spalten. Wenn Sie damit nicht vertraut sind, können Sie die Adresse des Elementdokuments überprüfen. Die im Dokument bereitgestellten Beispiele sind jedoch sehr einfach und können den Anforderungen komplexer Seiten nicht gerecht werden. Sie müssen daher die Daten verarbeiten.

Der folgende Code:

getListDataForRowAndColumn(Daten){
            lass self = dies;
            selbst.ZeileUndSpalte = [];
            selbst.rowRoomColumn = [];
            für (var i = 0; i < Datenlänge; i++) {
                wenn (i === 0) {
                    // Wenn es der erste Datensatz ist (d. h. wenn der Index 0 ist), addiere 1 zum Array
                    self.rowAndColumn.push(1);
                    selbst.pos = 0;
                    self.rowRoomColumn.push(1);
                    selbst.posT = 0;
                } anders {
                    //data[i].typeDesc sind die Feldinformationen, die Sie aus der Schnittstelle lesen. Das Gleiche gilt unten, wenn (data[i].typeDesc === data[i - 1].typeDesc) {
                        // Wenn typeDesc gleich ist, addiere und pushe 0
                        self.ZeileUndSpalte[self.pos] += 1
                        selbst.rowAndColumn.push(0)
                        wenn (data[i].areaDesc === data[i - 1].areaDesc) {
                            // Wenn areaDesc gleich ist, addiere und pushe 0
                            self.rowRaumSpalte[self.posT] += 1
                            selbst.rowRoomColumn.push(0)
                        } anders {
                            selbst.rowRoomColumn.push(1)
                            selbst.posT = i
                        }
                    } anders {
                        // Ungleich Push 1
                        selbst.rowAndColumn.push(1)
                        selbst.pos = i;
                        selbst.rowRoomColumn.push(1)
                        selbst.posT = i
                    }
                }
            }
        },

Der obige Code dient zum Organisieren Ihrer Daten. Die Kommentare sind sehr klar. Ich glaube, jeder kann sie verstehen. Wenn Sie sie wirklich nicht verstehen, drucken Sie sie einfach aus und schauen Sie sie sich an.

Nach der Aufbereitung der Daten wird die oben beschriebene Span-Methode angewendet. Wie in der Abbildung gezeigt:

Die Methode objectSpanMethod lautet wie folgt:

objectSpanMethod({ Zeile, Spalte, Zeilenindex, Spaltenindex }) {
            lass selbst = dies
            wenn (SpaltenIndex === 1) {
                wenn (self.rowAndColumn[rowIndex]) {
                Lassen Sie rowNum = self.rowAndColumn[rowIndex];
                zurückkehren {
                    Zeilenspanne: Zeilennummer,
                    colspan: Zeilennummer > 0 ? 1 : 0
                    }                                                   
                }
                zurückkehren {
                    Zeilenspanne: 0,
                    Spaltenbreite: 0
                }  
            }
            wenn (SpaltenIndex === 2) {
                wenn (self.rowRoomColumn[rowIndex]) {
                let roomNum = self.rowRoomColumn[rowIndex];
                zurückkehren {
                    Zeilenbereich: Raumnummer,
                    colspan: Zimmernummer > 0 ? 1 : 0
                    }                                                   
                }
                zurückkehren {
                    Zeilenspanne: 0,
                    Spaltenbreite: 0
                }  
            }
        },

Fertig, schauen wir uns das Effektbild an

Beachten Sie, dass bei dieser Methode das Backend die Daten vor dem Versenden sortieren muss, da die Seite sonst möglicherweise nicht den gewünschten Effekt erzielt. Da ich mit dem Zusammenführen ab der zweiten Spalte begonnen habe, beginnt der columnIndex in der Methode objectSpanMethod bei 1. Sie können ihn entsprechend Ihrer tatsächlichen Situation ändern. Fügen Sie die von der Schnittstelle erhaltenen Daten in die Methode getListDataForRowAndColumn ein und denken Sie daran, rowAndColumn und rowRoomColumn zu definieren.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Beispielcode für benutzerdefinierte Kopfzeilen und Zeilenzusammenführung in der Vue ElementUI-Tabelle
  • Vue realisiert den Effekt des Zusammenführens von Spalten im Zeilenbereich einer Datentabelle
  • Vue realisiert das Zusammenführen derselben Daten in einem Array
  • Vue.js implementiert Beispielcode zum Zusammenführen von Tabellen
  • Antd Vue Table führt Zellen über Zeilen hinweg zusammen und passt Inhaltsinstanzen an
  • In Vue führt die Element-UI-Tabelle dieselben Datenzellen in den oberen und unteren Zeilen zusammen
  • Implementierung der Zusammenführung mehrerer Spalten von Vue-Zellen
  • Vue verbindet Zellen dynamisch und fügt Zwischensummen hinzu – Beispielfunktion
  • require.js lädt Vue-Komponente, r.js zusammengeführtes und komprimiertes Beispiel
  • Vue Elenent realisiert das Zusammenführen gleicher Datenspalten in der Tabelle

<<:  Welche Beziehung besteht zwischen Mapper-SQL-Anweisungsfeldern und Entitätsklassen-Attributnamen?

>>:  Best Practices für die Bereitstellung des ELK7.3.0-Protokollsammlungsdienstes mit Docker

Artikel empfehlen

Beispielcode zur Implementierung des Bildschubladeneffekts mit CSS3

Wie üblich posten wir zuerst den Bildeffekt: Das ...

Beispielcode zur Implementierung einer Auto-Increment-Sequenz in MySQL

1. Erstellen Sie eine Sequenztabelle CREATE TABLE...

Lösen Sie das Problem verschwindender Docker-Images

1. Spiegelbilder verschwinden in 50 und 93 [root@...

9 praktische CSS-Eigenschaften, die Web-Frontend-Entwickler kennen müssen

1. Abgerundete Ecken Heutige Webdesigns halten stä...

Neues CSS3-Layout: ausführliche Flex-Erklärung

Flex-Grundkonzepte Flex-Layout (Flex ist die Abkü...

JavaScript-Singleton-Modus zum Implementieren benutzerdefinierter Popup-Fenster

In diesem Artikel wird der spezifische Code des J...

MySQL Serie 8 MySQL Server-Variablen

Tutorial-Reihe MySQL-Reihe: Grundlegende Konzepte...

WeChat-Applet implementiert Formularüberprüfung

Validierung des WeChat-Applets-Formulars. Zu Ihre...

Detaillierte Beispiele zur Verwendung der Box-Shadow-Eigenschaft in CSS3

CSS enthält viele Attribute. Manche Attribute wer...

Antworten auf mehrere häufig gestellte MySQL-Interviewfragen

Vorwort: Bei Vorstellungsgesprächen für verschied...

Methode zur Implementierung von Website-Hintergrundmusik

Für einzelne Webmaster war es schon immer das Ziel...

40 Webseiten-Designs mit supergroßen Schriftarten

Heutige Webdesigns neigen dazu, sehr große Schrif...