Comment utiliser EL-Table pour implémenter le groupe de table, glisser et déposer le tri dans Vue2?

Vue2 combiné avec El-Table pour implémenter le groupe de table

Cet article présente comment utiliser le composant El-Table pour implémenter la fonction de tri de table, de glisser-déposer dans le projet VUE2. Supposons que les données de la table soient divisées en deux groupes: "dépassé" et "non topped", et les données du groupe peuvent être triées en glisser, mais ne peuvent pas être traînées entre les groupes.

Description de la scène

Le projet utilise les composants El-Table de Vue2 et Element UI. Les données du tableau sont les suivantes:

• Zone supérieure: données numéro 1, 2, 3
• Zone non topped: données numéro 4, 5, 6

Cible:

1. Les données de la zone supérieure (1, 2, 3) peuvent être triées les unes des autres.
2. Les données de zone non topped (4, 5, 6) peuvent être triées les unes des autres.
3. Les données entre la zone supérieure et non to-toping (par exemple, 1 et 4) ne peuvent pas être traînées et déposées les unes des autres.

Plan de mise en œuvre

Utilisez vuedraggable pour implémenter la fonction de glisser-déposer.

1. Installer vuedraggable :

    NPM Install VueDraggable

2. Présentation vuedraggable :

   Dans les composants Vue:

    importer draggable à partir de «vueDraggable»

3. Réglage de la structure des données:

   Divisez les données de la table en deux tableaux:

    données() {
     retour {
       topData: [{id: 1, contenu: 'top 1'}, {id: 2, contenu: 'top 2'}, {id: 3, contenu: 'top 3'}],
       NormalData: [{id: 4, contenu: 'normal 4'}, {id: 5, contenu: 'normal 5'}, {id: 6, contenu: 'normal 6'}]
     };
   },
   Composants: {
     dragable
   }

4. Utilisez vuedraggable pour implémenter le glisser-déposer:

   Dans le modèle:

   <template>
     <div>
       <h3 id="Zone-supérieure">Zone supérieure</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="Zone-non-topped">Zone non topped</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. Traitement des événements de glisser-déposer:

   Dans les méthodes:

    Méthodes: {
     onend () {
       console.log ('Top Data:', this.topdata);
       Console.log ('Données non abonnées:', this.normaldata);
       // ajouter de la persistance des données ou une autre logique de mise à jour ici}
   }

Grâce aux étapes ci-dessus, l'ordre de glisser-déposer de groupe de la table El-Table peut être réalisé et les données entre les groupes ne peuvent pas être glissées et abandonnées. N'oubliez pas d'améliorer la persistance des données et d'autres opérations dans les applications réelles au besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!