vxe-table 行拖拽后 怎么修改tableData的顺序
时间: 2024-12-10 20:52:13 浏览: 9

Vue 使用vxe-table实现自定义分组合计及占比表组件
在vxe-table中,如果实现了行拖拽功能,通常会在拖动结束后更新表格数据(`tableData`)。这通常会涉及到对数组的操作,因为表格数据通常是数组结构。当你监听`sort-change`事件时,这个事件提供了一个新的数组,表示排序后的数据。下面是一个简单的示例:
1. 首先,你需要在组件中监听`sort-change`事件:
```javascript
<template>
<vxe-table :data="tableData" @sort-change="handleSortChange" />
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
tableData: ... // 初始化数据
};
},
methods: {
handleSortChange(newData) {
this.tableData = newData; // 将新排序后的数据赋值给tableData
}
}
});
</script>
```
在这个例子中,`handleSortChange`函数接收一个数组`newData`,这个数组就是你想要的新行顺序。
2. 当然,如果你想要在原地修改而不是复制整个数组,也可以使用数组的`splice()`方法来删除旧位置的元素并添加到新位置:
```javascript
handleSortChange(newOrder) {
for (let i = 0; i < newOrder.length; i++) {
const rowIndex = this.tableData.findIndex(item => item.id === newOrder[i].id); // 假设这里有唯一标识符'id'
if (rowIndex !== -1) {
this.tableData.splice(rowIndex, 1); // 移除
}
newOrder[i].index = i; // 添加新的索引信息
}
this.tableData.push(...newOrder); // 按照新顺序添加回表数据
}
```
注意,这里假设`tableData`中的每一行有一个唯一的`id`字段作为索引依据,如果没有这样的字段,你需要根据实际情况调整排序和移动逻辑。
阅读全文
相关推荐

















