vue实现表格列拖拽
vue实现表格列拖拽的方法
使用vuedraggable库
vuedraggable是一个基于Sortable.js的Vue拖拽组件库，适合实现表格列的拖拽功能。
安装依赖：
npm install vuedraggable --save示例代码：
<template>
<table>
<thead>
<draggable v-model="headers" tag="tr">
<th v-for="header in headers" :key="header">{{ header }}</th>
</draggable>
</thead>
<tbody>
<tr v-for="row in rows" :key="row.id">
<td v-for="header in headers" :key="header">{{ row[header] }}</td>
</tr>
</tbody>
</table>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
data() {
return {
headers: ['姓名', '年龄', '性别', '职业'],
rows: [
{ id: 1, 姓名: '张三', 年龄: 25, 性别: '男', 职业: '工程师' },
{ id: 2, 姓名: '李四', 年龄: 30, 性别: '女', 职业: '设计师' }
]
}
}
}
</script>使用原生HTML5拖拽API
如果不希望引入额外库，可以使用HTML5原生拖拽API实现。
<template>
<table>
<thead>
<tr>
<th
v-for="(header, index) in headers"
:key="header"
draggable="true"
@dragstart="dragStart(index)"
@dragover.prevent
@drop="drop(index)"
>
{{ header }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows" :key="row.id">
<td v-for="header in headers" :key="header">{{ row[header] }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
headers: ['姓名', '年龄', '性别', '职业'],
rows: [
{ id: 1, 姓名: '张三', 年龄: 25, 性别: '男', 职业: '工程师' },
{ id: 2, 姓名: '李四', 年龄: 30, 性别: '女', 职业: '设计师' }
],
draggedIndex: null
}
},
methods: {
dragStart(index) {
this.draggedIndex = index
},
drop(index) {
if (this.draggedIndex !== null) {
const headers = [...this.headers]
const draggedItem = headers[this.draggedIndex]
headers.splice(this.draggedIndex, 1)
headers.splice(index, 0, draggedItem)
this.headers = headers
this.draggedIndex = null
}
}
}
}
</script>使用Element UI表格拖拽
如果使用Element UI组件库，可以结合其表格和拖拽功能实现。
<template>
<el-table :data="tableData" border>
<el-table-column
v-for="column in columns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:fixed="column.fixed"
/>
</el-table>
</template>
<script>
import { Sortable } from 'sortablejs'
export default {
data() {
return {
columns: [
{ prop: 'date', label: '日期' },
{ prop: 'name', label: '姓名' },
{ prop: 'address', label: '地址' }
],
tableData: [
{ date: '2023-01-01', name: '张三', address: '北京' },
{ date: '2023-01-02', name: '李四', address: '上海' }
]
}
},
mounted() {
this.rowDrop()
},
methods: {
rowDrop() {
const wrapper = document.querySelector('.el-table__header-wrapper tr')
new Sortable(wrapper, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.columns[evt.oldIndex]
this.columns.splice(evt.oldIndex, 1)
this.columns.splice(evt.newIndex, 0, oldItem)
}
})
}
}
}
</script>注意事项
- 拖拽操作会改变数据顺序，需要确保数据同步更新
- 对于大数据量表格，需要考虑性能优化
- 移动端设备可能需要特殊处理触摸事件
- 拖拽过程中可以添加视觉反馈提升用户体验
以上方法可以根据项目需求和技术栈选择合适的实现方案。vuedraggable方案最为简单，原生API方案最轻量，Element UI方案适合已使用该组件库的项目。
