在使用 iView UI 的 Table 组件进行拖拽排序时,可以通过以下步骤获取最新的排序数据:
1. 启用拖拽功能
在 Table 组件上设置 draggable
属性,并绑定拖拽结束事件 @on-row-drop
。
<template>
<Table
:columns="columns"
:data="tableData"
draggable
@on-row-drop="handleRowDrop"
></Table>
</template>
2. 处理拖拽事件
在事件处理函数中,调整数据顺序并更新。
export default {
data() {
return {
tableData: [/* 初始数据 */],
columns: [/* 列配置 */]
}
},
methods: {
handleRowDrop({ oldIndex, newIndex }) {
// 复制原数组避免直接修改
const data = [...this.tableData];
// 删除被拖拽的元素
const item = data.splice(oldIndex, 1)[0];
// 插入到新位置
data.splice(newIndex, 0, item);
// 更新数据(触发响应式更新)
this.tableData = data;
// 这里可以获取最新数据,比如提交到后端
console.log('最新顺序:', this.tableData);
}
}
}
关键点说明:
-
索引获取:
@on-row-drop
事件会返回oldIndex
和newIndex
,分别表示拖拽起始位置和目标位置。 -
数组操作:使用
splice
方法移动数组元素,保持数据不变性。 -
响应式更新:直接替换
this.tableData
会触发 Vue 的响应式更新,无需额外操作。