vue table实现拖拽
实现拖拽功能的基本思路
在Vue中实现表格拖拽功能通常需要借助HTML5的拖放API或第三方库如sortablejs、vuedraggable等。以下是两种常见方法的详细说明。
使用HTML5原生拖放API
通过HTML5的draggable属性结合dragstart、dragover、drop等事件实现基础拖拽排序。
<template>
<table>
<tr
v-for="(item, index) in list"
:key="item.id"
draggable="true"
@dragstart="handleDragStart(index)"
@dragover.prevent="handleDragOver(index)"
@drop="handleDrop(index)"
>
<td>{{ item.name }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
],
draggedIndex: null
}
},
methods: {
handleDragStart(index) {
this.draggedIndex = index
},
handleDragOver(index) {
if (this.draggedIndex !== index) {
const draggedItem = this.list[this.draggedIndex]
this.list.splice(this.draggedIndex, 1)
this.list.splice(index, 0, draggedItem)
this.draggedIndex = index
}
},
handleDrop() {
this.draggedIndex = null
}
}
}
</script>使用第三方库vuedraggable
vuedraggable是基于sortablejs的Vue封装库，提供更简单的API和更好的兼容性。
安装依赖：
npm install vuedraggable示例代码：
<template>
<draggable
v-model="list"
tag="table"
item-key="id"
handle=".drag-handle"
>
<template #item="{ element }">
<tr>
<td class="drag-handle">↕️</td>
<td>{{ element.name }}</td>
</tr>
</template>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
data() {
return {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
}
}
}
</script>
<style>
.drag-handle {
cursor: move;
}
</style>高级功能扩展
对于复杂场景，可以结合以下特性：
- 限制拖拽范围：通过
group属性控制可拖拽区域 - 动画效果：启用
animation属性设置过渡效果 - 跨表格拖拽：配置相同的
group名称实现跨表格拖拽 - 数据持久化：在
end事件中保存排序后的数据到后端
// vuedraggable的跨表格配置
<draggable
group="shared-group"
@end="saveOrder"
/>性能优化建议
大数据量场景下：
- 使用虚拟滚动技术减少DOM节点
- 添加
delay属性避免误触 - 对复杂数据使用
clone模式减少直接操作原始数据
以上方法可根据实际需求选择或组合使用，第三方库方案通常更推荐用于生产环境。
