vue实现拖拽表格
Vue 实现拖拽表格的方法
使用第三方库（推荐）
推荐使用 vuedraggable 或 sortablejs 这类成熟的拖拽库，它们对 Vue 有良好支持且功能丰富。
安装 vuedraggable：
npm install vuedraggable示例代码：
<template>
<draggable v-model="tableData" tag="table" class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
data() {
return {
tableData: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
}
}
}
</script>原生 HTML5 拖拽 API
对于简单需求，可以直接使用 HTML5 的拖拽 API 配合 Vue 事件处理。
基本实现步骤：
<template>
<table>
<tbody>
<tr
v-for="(item, index) in tableData"
:key="item.id"
draggable="true"
@dragstart="handleDragStart(index)"
@dragover.prevent
@drop="handleDrop(index)"
>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
tableData: [...],
draggedIndex: null
}
},
methods: {
handleDragStart(index) {
this.draggedIndex = index
},
handleDrop(index) {
const item = this.tableData[this.draggedIndex]
this.tableData.splice(this.draggedIndex, 1)
this.tableData.splice(index, 0, item)
}
}
}
</script>高级功能扩展
对于需要更复杂交互的场景，可以结合以下功能：
- 跨表格拖拽：使用
group属性（vuedraggable） - 拖拽手柄：通过
handle属性指定可拖拽区域 - 动画效果：添加 CSS transition 或使用库内置动画
- 拖拽状态样式：通过
dragClass和ghostClass自定义样式
示例配置：
<draggable
v-model="list"
group="items"
handle=".handle"
animation="200"
ghost-class="ghost-item"
>
<!-- 表格内容 -->
</draggable>注意事项
- 数据绑定：确保使用
v-model或正确更新数据源 - 性能优化：大数据量时考虑虚拟滚动
- 移动端适配：测试触摸设备上的交互体验
- 辅助功能：为可访问性添加 ARIA 属性
