vue实现把el-table的行数据拖拽到el-trr

### Vue 实现 Element UI el-table 行数据拖拽至其他元素 为了实现在 Vue 中将 Element UI 的 `el-table` 行数据拖拽到另一个元素的功能，可以通过结合 SortableJS 和自定义事件处理逻辑来实现。以下是具体的实现方法： #### 1. 安装依赖 首先安装所需的依赖包： ```bash npm install sortablejs --save ``` #### 2. 创建可拖拽的表格行 在模板部分创建一个 `el-table` 组件，并为其每一行添加 `draggable="true"` 属性以便能够触发原生 HTML5 拖放 API。 ```html <template> <div class="container"> <!-- 可拖拽的表格 --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <tr v-for="(item, index) in tableData" :key="index" draggable @dragstart="handleDragStart($event, item)"> <td>{{ item.date }}</td> <td>{{ item.name }}</td> <td>{{ item.address }}</td> </tr> </el-table> <!-- 接收区域 --> <div id="drop-area" @dragover.prevent @drop="handleDrop">接收区</div> </div> </template> ``` 注意这里给 `<tr>` 添加了 `@dragstart` 事件监听器用于初始化拖拽操作并传递当前项的信息[^2]。 #### 3. 处理拖拽事件 接着编写 JavaScript 部分的方法来管理这些事件: ```javascript <script setup> import { ref } from 'vue'; const tableData = ref([ { date: "2016-05-03", name: "Tom", address: "No. 189, Grove St, Los Angeles" }, // 更多模拟数据... ]); function handleDragStart(event, item){ event.dataTransfer.setData('text/plain', JSON.stringify(item)); } function handleDrop(event){ const data = event.dataTransfer.getData('text'); let draggedItem = null; try{ draggedItem = JSON.parse(data); } catch(e){ console.error("解析失败", e); } if(draggedItem !== null){ alert(`已成功接收到 ${draggedItem.name} 的记录`); } } </script> ``` 这段代码实现了当用户开始拖动某一行时会把该行对应的对象序列化成字符串存储起来；而目标容器捕获到了 drop 事件之后再反序列化取出原始的对象信息[^4]。 通过这种方式就可以轻松地让 `el-table` 的行成为可移动单元，并能被放置到页面上的任意指定位置上作为新的上下文的一部分[^3]。