VUE2 digabungkan dengan El-Table untuk melaksanakan pengumpulan meja, seret dan drop sorting

Artikel ini memperkenalkan cara menggunakan komponen El-Table untuk melaksanakan fungsi pengelompokan jadual, seret dan drop penyortiran dalam projek VUE2. Katakan data jadual dibahagikan kepada dua kumpulan: "di atas" dan "tidak topped", dan data dalam kumpulan boleh disusun dengan menyeret, tetapi tidak boleh diseret di antara kumpulan.

Penerangan adegan

Projek ini menggunakan komponen Vue2 dan Element UI. Data jadual adalah seperti berikut:

• Kawasan Teratas: Nombor Data 1, 2, 3
• Kawasan Tidak Dihidupkan: Nombor Data 4, 5, 6

Sasaran:

1. Data kawasan teratas (1, 2, 3) boleh disusun dari satu sama lain.
2. Data kawasan yang tidak didapati (4, 5, 6) boleh disusun dari satu sama lain.
3. Data di antara kawasan atas dan bukan toping (contohnya, 1 dan 4) tidak boleh diseret dan jatuh dari satu sama lain.

Pelan pelaksanaan

Gunakan perpustakaan vuedraggable untuk melaksanakan fungsi seret dan drop.

1. Pasang vuedraggable :

    NPM Pasang Vuedraggable

2. Memperkenalkan vuedraggable :

   Dalam komponen Vue:

    Import Draggable dari 'Vuedraggable'

3. Pelarasan Struktur Data:

   Bahagikan data jadual ke dalam dua tatasusunan:

    data () {
     kembali {
       topData: [{id: 1, kandungan: 'atas 1'}, {id: 2, kandungan: 'atas 2'}, {id: 3, kandungan: 'atas 3'}],
       normalData: [{id: 4, kandungan: 'normal 4'}, {id: 5, kandungan: 'normal 5'}, {id: 6, kandungan: 'normal 6'}]
     };
   },
   Komponen: {
     Draggable
   }

4. Gunakan vuedraggable untuk melaksanakan seretan dan drop:

   Dalam templat:

   <template>
     <div>
       <h3>Kawasan teratas</h3>
       <draggable group="top" v-model="topData">
         <el-table :data="topData" style="width: 100%">
           <el-table-column label="內(nèi)容" prop="content"></el-table-column>
         </el-table>
       </draggable>
       <h3>Kawasan yang tidak diapit</h3>
       <draggable group="normal" v-model="normalData">
         <el-table :data="normalData" style="width: 100%">
           <el-table-column label="內(nèi)容" prop="content"></el-table-column>
         </el-table>
       </draggable>
     </div>
   </template>

5. Seret dan drop end Acara Pemprosesan:

   Dalam kaedah:

    Kaedah: {
     onend () {
       console.log ('Data atas:', this.topdata);
       Console.log ('Data tidak dilanggar:', this.normalData);
       // Tambahkan kegigihan data atau logik kemas kini lain di sini}
   }

Melalui langkah-langkah di atas, kumpulan seret dan drop pesanan jadual EL-meja dapat direalisasikan, dan data antara kumpulan tidak boleh diseret dan dijatuhkan. Ingat untuk meningkatkan ketekunan data dan operasi lain dalam aplikasi sebenar seperti yang diperlukan.

Atas ialah kandungan terperinci Bagaimana cara menggunakan El-Table untuk melaksanakan pengelompokan meja, seret dan drop penyortiran di VUE2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!