在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组件中：

   

   会译·对照式翻译

   会译是一款AI智能翻译浏览器插件，支持多语种对照式翻译

   下载

   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表格的分组拖拽排序，且组间数据无法互相拖拽。 记得在实际应用中根据需要完善数据持久化等操作。