vxe-table列拖拽排序
时间: 2023-08-06 13:06:03 浏览: 152
`vxe-table` 提供了 `sortable` 属性来实现列拖拽排序功能,使用非常方便。
只需将 `sortable` 属性设置为 `custom`,同时在 `column` 中设置 `orderList` 属性,即可启用列拖拽排序功能。`orderList` 属性是一个数组,用于存储列的排序顺序,按照数组的顺序排列列,例如:
```js
[
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' },
{ field: 'gender', title: '性别' }
]
```
假设我们要实现对列的拖拽排序功能,可以这样设置 `vxe-table`:
```html
<template>
<vxe-table :data="tableData" :columns="tableColumns" :sortable="'custom'" @sort-change="handleSortChange"></vxe-table>
</template>
<script>
export default {
data () {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' }
],
tableColumns: [
{ field: 'name', title: '姓名', orderList: ['name', 'age', 'gender'] },
{ field: 'age', title: '年龄', orderList: ['name', 'age', 'gender'] },
{ field: 'gender', title: '性别', orderList: ['name', 'age', 'gender'] }
]
}
},
methods: {
handleSortChange (params) {
const { column, order } = params
const orderList = column.orderList
const index = orderList.indexOf(column.field)
orderList.splice(index, 1)
orderList.splice(order, 0, column.field)
}
}
}
</script>
```
在上面的例子中,我们将 `sortable` 属性设置为 `custom`,并在 `column` 中设置 `orderList` 属性,用于存储列的排序顺序。在 `sort-change` 事件中,我们根据列的排序顺序更新 `orderList` 数组,从而实现列拖拽排序功能。