vue实现表格列拖拽
Vue 实现表格列拖拽的方法
使用 vuedraggable 插件
安装 vuedraggable 插件，适用于基于列的拖拽排序npm install vuedraggable --save
在组件中引入并使用：
import draggable from 'vuedraggable'
export default {
components: { draggable },
data() {
return {
headers: ['ID', 'Name', 'Age'],
tableData: [
{ id: 1, name: 'John', age: 20 },
{ id: 2, name: 'Jane', age: 24 }
]
}
}
}模板部分实现：
<draggable v-model="headers" tag="tr">
<th v-for="header in headers" :key="header">{{ header }}</th>
</draggable>
<tr v-for="item in tableData" :key="item.id">
<td v-for="header in headers" :key="header">{{ item[header.toLowerCase()] }}</td>
</tr>原生 HTML5 拖拽 API
通过 HTML5 的拖拽事件实现列交换
设置可拖拽列：
methods: {
dragStart(e, index) {
e.dataTransfer.setData('text/plain', index)
e.dataTransfer.effectAllowed = 'move'
},
drop(e, targetIndex) {
const sourceIndex = e.dataTransfer.getData('text/plain')
const newHeaders = [...this.headers]
newHeaders.splice(targetIndex, 0, newHeaders.splice(sourceIndex, 1)[0])
this.headers = newHeaders
}
}模板事件绑定：
<tr>
<th v-for="(header, index) in headers"
:key="header"
draggable="true"
@dragstart="dragStart($event, index)"
@dragover.prevent
@drop="drop($event, index)">
{{ header }}
</th>
</tr>使用 Element UI 的 Table 组件
Element UI 表格支持自定义列拖拽
安装 Element UI：
npm install element-ui -S
实现列拖拽逻辑：
handleHeaderDragEnd(newIndex, oldIndex) {
const headers = [...this.headers]
const movedHeader = headers.splice(oldIndex, 1)[0]
headers.splice(newIndex, 0, movedHeader)
this.headers = headers
}模板配置：
<el-table :data="tableData">
<el-table-column
v-for="header in headers"
:key="header.prop"
:prop="header.prop"
:label="header.label"
:column-key="header.prop"
sortable
resizable
show-overflow-tooltip>
</el-table-column>
</el-table>注意事项
- 拖拽操作会改变原始数据顺序，需要做好数据备份
- 移动端需要额外处理触摸事件
- 复杂表格建议使用现成组件库的拖拽功能
- 拖拽性能优化对于大数据量表格很重要
以上方法可根据项目需求和技术栈选择适合的实现方案。
