在Vue2中如何使用el-table實現表格分組拖拽排序？

vue2結合el-table實現表格分組拖拽排序

本文介紹如何在Vue2項目中，利用el-table組件實現表格分組拖拽排序功能。 假設表格數據分為“置頂”和“非置頂”兩組，要求組內數據可拖拽排序，但組間不可拖拽。

場景描述

項目使用Vue2和Element ui的el-table組件。表格數據如下：

• 置頂區域：1、2、3號數據
• 非置頂區域：4、5、6號數據

目標：

1. 置頂區域數據（1、2、3）可互相拖拽排序。
2. 非置頂區域數據（4、5、6）可互相拖拽排序。
3. 置頂和非置頂區域數據之間（例如1和4）不可互相拖拽。

實現方案

借助vuedraggable庫實現拖拽功能。

立即學習“前端免費學習筆記（深入）”；

1. 安裝vuedraggable:

   npm install vuedraggable

2. 引入vuedraggable:

   在Vue組件中：

   import draggable from 'vuedraggable'

3. 數據結構調整:

   將表格數據分為兩個數組：

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

4. 使用vuedraggable實現拖拽:

   在模板中：

   <template>   <div>     <h3>置頂區域</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>非置頂區域</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. 拖拽結束事件處理:

   在methods中：

   methods: {   onEnd() {     console.log('置頂數據:', this.topData);     console.log('非置頂數據:', this.normalData);     //  在此處添加數據持久化或其他更新邏輯   } }

通過以上步驟，即可實現el-table表格的分組拖拽排序，且組間數據無法互相拖拽。 記得在實際應用中根據需要完善數據持久化等操作。

以上就是在Vue2中如何使用el-table實現表格分組