在vxetable中使用sortable拖拽单元跨行与另一个单元交换位置中间的单元会自动上调导致排序混乱怎么解决
时间: 2024-03-15 21:48:00 浏览: 52
要解决这个问题,你需要使用`sort-method`属性来自定义排序的方法。具体步骤如下:
1. 在`<vxe-table>`标签上添加`sort-method`属性,值为一个函数,该函数接收两个参数:`sortObj`和`list`,`sortObj`表示当前的排序对象,`list`表示当前表格中的数据列表。
2. 在函数中自定义排序方法,首先找到被拖拽的行和目标行的索引,然后通过交换这两行的数据来完成位置的交换。最后返回一个新的排序后的数据列表。
下面是一个示例代码:
```html
<template>
<vxe-table :data="tableData" :sort-method="handleSort">
<!-- 省略其他列 -->
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 20 },
{ id: 2, name: 'Mary', age: 25 },
{ id: 3, name: 'Jack', age: 30 },
{ id: 4, name: 'Lisa', age: 35 }
]
}
},
methods: {
handleSort(sortObj, list) {
let { column, order } = sortObj
if (column.property === 'age') { // 只对年龄列进行排序
if (order === 'desc') {
list.sort((a, b) => b.age - a.age)
} else {
list.sort((a, b) => a.age - b.age)
}
}
return list
}
}
}
</script>
```
在上面的示例中,我们只对年龄列进行排序,并且使用`list.sort()`方法来完成排序。你可以根据自己的实际需求来自定义排序方法。
阅读全文