Wie benutzt ich El-Table, um die Tabellengruppierung und die Drag & Drop-Sortierung in VUE2 zu implementieren?

VUE2 kombiniert mit el-table zum Implementieren von Tabellengruppierung, Drag & Drop-Sortierung

In diesem Artikel wird vorgestellt, wie die EL-Table-Komponente zur Implementierung der Tabellengruppierung, der Drag & Drop-Sortierfunktion im VUE2-Projekt implementiert wird. Nehmen wir an, die Tabellendaten sind in zwei Gruppen unterteilt: "übertroffen" und "nicht toppelt", und die Daten in der Gruppe können durch Ziehen sortiert werden, können jedoch nicht zwischen den Gruppen gezogen werden.

Szenenbeschreibung

Das Projekt verwendet die el-table-Komponenten von VUE2 und Element UI. Die Tabellendaten sind wie folgt:

• Top -Bereich: Datennummer 1, 2, 3
• Nicht-Top-Bereich: Daten Nummer 4, 5, 6

Ziel:

1. Die Top -Bereichsdaten (1, 2, 3) können voneinander sortiert werden.
2. Nicht toppierte Flächendaten (4, 5, 6) können voneinander sortiert werden.
3. Die Daten zwischen dem oberen und ohne Topingbereich (z. B. 1 und 4) können nicht gezogen und voneinander fallen gelassen werden.

Implementierungsplan

Verwenden Sie vuedraggable -Bibliothek, um die Drag & Drop -Funktion zu implementieren.

1. Installieren Sie vuedraggable :

    NPM installieren Sie vugagable

2. Einführung vuedraggable :

   In Vue -Komponenten:

    importierbar von 'vuedraggable' importieren

3. Datenstrukturanpassung:

   Teilen Sie die Tabellendaten in zwei Arrays:

    Data () {
     zurückkehren {
       TOPDATA: [{ID: 1, Inhalt: 'Top 1'}, {id: 2, Inhalt: 'Top 2'}, {id: 3, Inhalt: 'Top 3'}],
       NormalData: [{ID: 4, Inhalt: 'Normal 4'}, {ID: 5, Inhalt: 'Normal 5'}, {ID: 6, Inhalt: 'Normal 6'}]
     };
   },
   Komponenten: {
     draggierbar
   }

4. Verwenden Sie vuedraggable , um Drag & Drop zu implementieren:

   In der Vorlage:

   <template>
     <div>
       <h3 id="Top-Bereich">Top -Bereich</h3>
       <draggable group="top" v-model="topData">
         <el-table :data="topData" style="width: 100%">
           <el-table-column label="内容" prop="content"></el-table-column>
         </el-table>
       </draggable>
       <h3 id="Gebiet-ohne-Top">Gebiet ohne Top</h3>
       <draggable group="normal" v-model="normalData">
         <el-table :data="normalData" style="width: 100%">
           <el-table-column label="内容" prop="content"></el-table-column>
         </el-table>
       </draggable>
     </div>
   </template>

5. Drag & Drop End -Ereignisverarbeitung:

   In Methoden:

    Methoden: {
     onend () {
       console.log ('Top -Daten:', this.topdata);
       console.log ('nicht subschreibere Daten:', this.normaldata);
       // Daten Persistenz oder andere Aktualisierungslogik hier hinzufügen}
   }

Durch die oben genannten Schritte kann die Gruppenwiderstandsordnung der El-Table-Tabelle realisiert werden, und die Daten zwischen Gruppen können nicht geschleppt und fallen gelassen werden. Denken Sie daran, die Datenpersistenz und andere Operationen in tatsächlichen Anwendungen nach Bedarf zu verbessern.

Das obige ist der detaillierte Inhalt vonWie benutzt ich El-Table, um die Tabellengruppierung und die Drag & Drop-Sortierung in VUE2 zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!