Vue2 combined with el-table to implement table grouping, drag and drop sorting

This article introduces how to use the el-table component to implement the table grouping, drag and drop sorting function in the Vue2 project. Suppose the table data is divided into two groups: "topped" and "non-topped", and the data in the group can be sorted by dragging, but cannot be dragged between groups.

Scene description

The project uses Vue2 and Element UI's el-table components. The table data is as follows:

• Top area: data number 1, 2, 3
• Non-topped area: data number 4, 5, 6

Target:

1. The top area data (1, 2, 3) can be sorted from each other.
2. Non-topped area data (4, 5, 6) can be sorted from each other.
3. The data between the top and non-toping area (for example, 1 and 4) cannot be dragged and dropped from each other.

Implementation plan

Use vuedraggable library to implement drag and drop function.

1. Install vuedraggable :

    npm install vuedraggable

2. Introducing vuedraggable :

   In Vue components:

    import draggable from 'vuedraggable'

3. Data structure adjustment:

   Divide the table data into two arrays:

    data() {
     return {
       topData: [{ id: 1, content: 'top 1' }, { id: 2, content: 'top 2' }, { id: 3, content: 'top 3' }],
       normalData: [{ id: 4, content: 'normal 4' }, { id: 5, content: 'normal 5' }, { id: 6, content: 'normal 6' }]
     };
   },
   components: {
     draggable
   }

4. Use vuedraggable to implement drag and drop:

   In the template:

   <template>
     <div>
       <h3>Top area</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>Non-topped area</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 and drop end event processing:

   In methods:

    methods: {
     onEnd() {
       console.log('Top data:', this.topData);
       console.log('Non-subscribed data:', this.normalData);
       // Add data persistence or other update logic here}
   }

Through the above steps, the group drag and drop ordering of the el-table table can be realized, and the data between groups cannot be dragged and dropped. Remember to improve data persistence and other operations in actual applications as needed.

The above is the detailed content of How to use el-table to implement table grouping, drag and drop sorting in Vue2?. For more information, please follow other related articles on the PHP Chinese website!