在数据表格中，除了展示数据，用户往往还希望根据自己的习惯调整列的顺序或行的顺序。vxe-table 提供了列拖拽排序和行拖拽排序功能，只需简单的配置即可启用，并且支持获取排序后的结果，方便持久化保存。
本文分别介绍列拖拽排序和行拖拽排序的配置方法，并提供完整示例。
配置说明
| 配置项 | 类型 | 说明 |
|---|---|---|
| columnConfig.drag | Boolean | 设为 true 后，所有列均可通过拖拽调整顺序。 |
| getFullColumns() | 方法 | 获取当前列配置数组，包含拖拽后的顺序。 |
| column.dragSort | Boolean | 可在单列上设置，控制该列是否可被拖拽排序（优先级高于全局）。 |
- 注意事项：
- 固定列（fixed）通常不能参与拖拽，否则可能引发布局错乱。
- 拖拽排序会改变列的物理顺序，影响后续渲染。如需持久化，可将 getFullColumns() 的结果保存到后端。
- 与 showCustomHeader（自定义表头合并）同时使用时，列拖拽可能受限。
列拖拽事件
| 事件名 | 触发时机 | 事件参数 | 说明 |
|---|---|---|---|
| column-dragstart | 开始拖拽列时 | { column, $column, event } | 可用于记录拖拽起始列，或添加自定义样式。 |
| column-dragover | 拖拽经过其他列时（频繁触发） | { column, $column, event } | 可用于动态显示插入位置指示器，或限制拖拽目标。 |
| column-dragend | 拖拽结束时（无论是否成功） | { column, $column, isSuccess, event } | 可用于清理样式、保存排序结果。 |
列拖拽排序
通过 columnConfig.drag = true 即可启用列拖拽排序功能。用户将鼠标移动到列头部，按住拖拽即可将该列移动到任意位置。
html
<template>
<div>
<vxe-button status="success" @click="resultEvent">获取数据</vxe-button>
<vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const gridRef = ref()
const gridOptions = reactive({
border: true,
rowConfig: {
keyField: 'id'
},
columnConfig: {
drag: true
},
columns: [
{ field: 'name', title: 'Name' },
{ field: 'role', title: 'Role' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' },
{ field: 'address', title: 'Address' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
]
})
const resultEvent = () => {
const $grid = gridRef.value
if ($grid) {
const tableColumn = $grid.getFullColumns()
console.log(tableColumn)
}
}
</script>配置说明
| 配置项 | 类型 | 说明 |
|---|---|---|
| rowConfig.drag | Boolean | 必须设为 true，启用行拖拽能力。 |
| column.dragSort | Boolean | 必须为至少一列设置 dragSort: true，该列作为拖拽把手。通常选择名称或操作列。 |
| rowConfig.keyField | String | 强烈推荐设置主键字段，便于拖拽后准确更新数据。 |
| getFullData() | 方法 | 获取当前数据数组，顺序已按拖拽结果调整。 |
- 注意事项：
- rowConfig.drag 和 dragSort 必须同时配置，缺一不可。
- 拖拽排序会直接修改内存中的 data 数组顺序。如需持久化，监听 @drag-sort 事件或调用 getFullData() 保存。
- 如果数据量很大（数千行），支持虚拟滚动使用，拖拽时丝滑流畅。
- 支持树形表格拖拽，支持同级，跨层级等
行拖拽事件
| 事件名 | 触发时机 | 事件参数 | 说明 |
|---|---|---|---|
| row-dragstart | 开始拖拽行时 | { row, index, event } | 可用于记录拖拽起始行、添加视觉反馈。 |
| row-dragover | 拖拽经过其他行时（频繁触发） | { row, index, event } | 可用于显示插入位置、限制拖拽目标。 |
| row-dragend | 拖拽结束时（无论是否成功） | { row, index, isSuccess, event } | 可用于清理样式、保存排序结果。 |
- 性能提示：row-dragover 会非常频繁触发，请避免在该事件中执行复杂计算。如果不需要中间控制，使用 @drag-sort 事件（仅在成功排序后触发）更加高效。
行拖拽排序
通过 rowConfig.drag = true 并配合列的 dragSort 属性，即可启用行拖拽排序功能。用户将鼠标移动到指定列（拖拽把手）上，按住拖拽即可将该行移动到任意位置。
html
<template>
<div>
<vxe-button status="success" @click="resultEvent">获取数据</vxe-button>
<vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const gridRef = ref()
const gridOptions = reactive({
border: true,
rowConfig: {
drag: true
},
columns: [
{ field: 'name', title: 'Name' },
{ field: 'role', title: 'Role', dragSort: true },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' },
{ field: 'address', title: 'Address' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
]
})
const resultEvent = () => {
const $grid = gridRef.value
if ($grid) {
const tableData = $grid.getFullData()
console.log(tableData)
}
}
</script>- vxe-table 的列拖拽排序和行拖拽排序提供了直观、灵活的交互方式，让用户可以根据自己的需求自由调整表格结构或数据顺序。只需简单的全局配置，配合相应的事件和 API，即可快速实现。
- 列拖拽：适用于个性化表格视图，让用户决定哪些列在前、哪些在后。
- 行拖拽：适用于任务管理、排序列表等场景，让用户手动调整数据优先级。