vue.js implementiert Beispielcode für die Tabellenzusammenführung

Vorwort

Da ich Vue verwende, denke ich, dass MVVM datengesteuert sein muss, daher denke ich darüber nach, Tricks im Modell auszuführen, anstatt die Daten zu rendern und dann DOM-Operationen durchzuführen. Natürlich grundlegend CSS ist immer noch erforderlich. Daher ist diese Methode für alle datengesteuerten Frameworks wie Angular und React gültig.

Implementierungsidee

Der Code der ursprünglichen Normalform sieht folgendermaßen aus:

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="15%">{{item.bsO_Name}}</td>
 <td width="8%" :class="{&#39;overtime&#39;: overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%">{{item.F1}}</td>
 <td width="5%">{{item.F2}}</td>
 <td width="5%">{{item.F4}}</td>
 <td width="5%">{{item.F3}}</td>
 <td width="5%">{{item.F5}}</td>
 <td width="5%">{{item.F6}}</td>
 <td width="5%">{{item.F7}}</td>
 <td width="5%">{{item.F8}}</td>
 <td width="5%">{{item.F9}}</td>
 <td width="5%">{{item.F10}}</td>
</tr>

Verwenden Sie zunächst die Normalform zum Testen, die native Die Beschriftung verfügt über ein Rowspan-Attribut, das das Zusammenführen von Zellenzeilen unterstützt. Der Attributwert bezieht sich darauf, wie viele Zeilen nach unten zusammengeführt werden. Tatsächlich entspricht dies dem Hinzufügen einiger weiterer Zellen nach unten.

Denn wenn die nächste Zeile noch gerendert wird, müssen die zusammengeführten Zellen unten ausgeblendet werden, was durch display: none gesteuert werden kann.

Daher muss jedes -Tag zwei Attributwerte haben, rowspan und display, um die Anzahl der zusammengeführten Zeilen jeder Zelle zu steuern und ob diese angezeigt werden sollen.

Der Code sieht so aus

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="10%" :rowspan="item.bsO_Namespan" :class="{hidden: item.bsO_Namedis}">{{item.bsO_Name}}</td>
 <td width="8%" :rowspan="item.GathDtspan" :class="{hidden: item.GathDtdis}" :class="{overtime: overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%" :rowspan="item.F1span"  :class="{hidden: item.F1dis}">{{item.F1}}</td>
 <td width="5%" :rowspan="item.F2span"  :class="{hidden: item.F2dis}">{{item.F2}}</td>
 <td width="5%" :rowspan="item.F3span"  :class="{hidden: item.F3dis}">{{item.F3}}</td>
 <td width="5%" :rowspan="item.F4span"  :class="{hidden: item.F4dis}">{{item.F4}}</td>
 <td width="5%" :rowspan="item.F5span"  :class="{hidden: item.F5dis}">{{item.F5}}</td>
 <td width="10%" :rowspan="item.F6span"  :class="{hidden: item.F6dis}">{{item.F6}}</td>
 <td width="8%" :rowspan="item.F7span"  :class="{hidden: item.F7dis}" :class="{overtime: overtime(item.F7)}">{{item.F7 | time}}</td>
 <td width="5%" :rowspan="item.F8span"  :class="{hidden: item.F8dis}">{{item.F8}}</td>
 <td width="5%" :rowspan="item.F9span"  :class="{hidden: item.F9dis}">{{item.F9}}</td>
 <td width="5%" :rowspan="item.F10span"  :class="{hidden: item.F10dis}">{{item.F10}}</td>
 <td width="5%" :rowspan="item.F11span"  :class="{hidden: item.F11dis}">{{item.F11}}</td>
</tr>

Unter diesen beiden Attributen gibt es einige Eigenschaften:

Zur Anzeige Der Zeilenbereich der Zelle ist >1 Wert, notieren Sie die nächste Zeilennummer

Die anzuzeigende Zelle ist wahr

Der Zeilenbereich der nächsten Zelle, der nicht angezeigt werden soll, ist 1 und Die Anzeige ist falsch

Die Zelle mit nur einer Datenzeile ist 1 und die Anzeige ist wahr

Tatsächlich geht es darum, einen Algorithmus für das Eingabetabellenarray zu entwerfen , fügen Sie jedem Datenelement zwei Attribute hinzu, Rowspan und Display, und berechnen Sie die Anzahl der Zeilen, deren Rowspan-Wert

ist, mit den folgenden gleichen Werten in dieser Spalte und berechnen Sie, ob der Anzeigewert ist Basierend auf dem Rowspan-Wert wird das geänderte Array angezeigt und schließlich ausgegeben.

Lösen Sie den Beispielcode

function combineCell(list) {
 for (field in list[0]) {
  var k = 0;
  while (k < list.length) {
   list[k][field + &#39;span&#39;] = 1;
   list[k][field + &#39;dis&#39;] = false;
   for (var i = k + 1; i <= list.length - 1; i++) {
    if (list[k][field] == list[i][field] && list[k][field] != &#39;&#39;) {
     list[k][field + &#39;span&#39;]++;
     list[k][field + &#39;dis&#39;] = false;
     list[i][field + &#39;span&#39;] = 1;
     list[i][field + &#39;dis&#39;] = true;
    } else {
     break;
    }
   }
   k = i;
  }
 }
 return list;
}

Zusammenfassung

Der Code ist eigentlich sehr kurz und einfach und verwendet hauptsächlich kmp Die Idee besteht darin, einen Zeiger k zu definieren, der auf den ersten Wert zeigt, und ihn dann nach unten zu vergleichen, um die Zeilenspanne festzulegen und anzuzeigen.

Wenn unterschiedliche Werte angetroffen werden, wird dies als beurteilt Herausspringen und fortfahren. In der nächsten Schleife wird der Benachrichtigungszeiger k zur Anzahl der in diesem Prozess berechneten Zeilen zum Springen addiert und dann der Wert der nächsten Zelle verglichen, was dem gleichen Prinzip entspricht wie der kmp-Zeiger, zu dem gesprungen wird Bestimmen Sie die gleiche Zeichenfolge.

Mit der Funktion „combineCell()“ können Sie die von der Netzwerkanforderung zurückgegebenen Daten filtern, den entsprechenden Wert anhängen und den Wert dann dem von vue überwachten Array zuweisen.

Tatsächlich ist diese Methode nicht nur auf Vue anwendbar, sondern auch auf datengesteuerte Frameworks, einschließlich Angular und React. Wenn Sie eine Tabellenzusammenführung erreichen möchten, filtern Sie einfach die zurückgegebenen Werte die Anfrage.