ant design vue 两个表格间进行拖拽

Ant Design Vue 提供了一个 <a href="https://www.antdv.com/components/table-cn/#components-table-demo-drag-sorting" target="_blank">Table.DraggableHeader</a> 组件，可以实现表格列的拖拽排序。但是如果要实现两个表格之间的拖拽，需要自己手动实现。 一种实现方式是使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer" target="_blank">DataTransfer</a> 对象，将表格行的数据存储到拖放事件中，然后在拖放结束时获取数据并插入到目标表格中。具体实现可以参考以下步骤： 1. 在源表格的每一行上添加拖拽事件监听器，将行数据存储到 DataTransfer 对象中： ```html <template> <div> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr draggable="true" @dragstart="handleDragStart"> <td>张三</td> <td>18</td> </tr> <tr draggable="true" @dragstart="handleDragStart"> <td>李四</td> <td>20</td> </tr> </tbody> </table> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr></tr> <tr></tr> </tbody> </table> </div> </template> <script> export default { methods: { handleDragStart(e) { const data = { name: e.target.children[0].textContent, age: e.target.children[1].textContent } e.dataTransfer.setData('text/plain', JSON.stringify(data)) } } } </script> ``` 2. 在目标表格上添加拖放事件监听器，获取 DataTransfer 对象中的数据并插入到表格中： ```html <template> <div> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr draggable="true" @dragstart="handleDragStart"> <td>张三</td> <td>18</td> </tr> <tr draggable="true" @dragstart="handleDragStart"> <td>李四</td> <td>20</td> </tr> </tbody> </table> <table @dragover.prevent @drop="handleDrop"> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr></tr> <tr></tr> </tbody> </table> </div> </template> <script> export default { methods: { handleDragStart(e) { const data = { name: e.target.children[0].textContent, age: e.target.children[1].textContent } e.dataTransfer.setData('text/plain', JSON.stringify(data)) }, handleDrop(e) { const data = JSON.parse(e.dataTransfer.getData('text/plain')) const row = e.target.closest('tr') row.children[0].textContent = data.name row.children[1].textContent = data.age } } } </script> ``` 注意，要阻止拖放事件的默认行为（如打开链接或图片），需要在 dragover 事件中调用 preventDefault() 方法。此外，还需要在目标表格的 drop 事件中调用 preventDefault() 方法，以防止浏览器将数据作为文件下载。 以上代码只是一个简单的示例，实际应用中可能需要更复杂的逻辑来处理拖放行为。