潮州网站制作网站建设与管理怎么样

在使用 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);}}
}

关键点说明：

1. 索引获取：@on-row-drop 事件会返回 oldIndex 和 newIndex，分别表示拖拽起始位置和目标位置。

2. 数组操作：使用 splice 方法移动数组元素，保持数据不变性。

3. 响应式更新：直接替换 this.tableData 会触发 Vue 的响应式更新，无需额外操作。