vxe-table排序
时间: 2023-10-31 21:05:16 浏览: 158
vxe-table提供了多种排序方式,包括单列排序和多列排序。其中单列排序可以通过设置表头的sortable属性来实现,而多列排序则需要使用sort-method属性和sort-by属性来实现。具体步骤如下:
1. 单列排序:在表头中设置sortable属性为true,即可开启单列排序功能。默认情况下,点击表头会按照升序排序,再次点击则按照降序排序。如果需要自定义排序规则,可以通过设置sort-method属性来实现。
2. 多列排序:在表头中设置sort-by属性,可以指定多个列进行排序。同时,需要设置sort-method属性来指定排序规则。在sort-method方法中,可以通过参数获取到当前的排序列和排序方式,从而实现多列排序。
相关问题
vxe-table 拖拽排序
vxe-table提供了拖拽排序的功能,可以通过拖拽表格行来改变它们的顺序。下面是一个演示如何使用vxe-table实现拖拽排序的例子:
```html
<template>
<div>
<vxe-table
ref="table"
:data="tableData"
:columns="columns"
:sortable="true"
@sort-change="handleSortChange"
></vxe-table>
</div>
</template>
<script>
import 'vxe-table/lib/style.css';
import { VXETable } from 'vxe-table';
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 20 },
{ id: 2, name: 'Mike', age: 25 },
{ id: 3, name: 'Tom', age: 30 },
{ id: 4, name: 'Jerry', age: 35 },
],
columns: [
{ field: 'id', title: 'ID', width: 80 },
{ field: 'name', title: 'Name', width: 120 },
{ field: 'age', title: 'Age', width: 80 },
],
};
},
mounted() {
VXETable.setup({
table: {
mouseConfig: {
selected: true,
checked: true,
checkedByClickRow: true,
checkedByCell: true,
},
},
});
},
methods: {
handleSortChange({ column, order }) {
const { table } = this.$refs;
table.sort(column.field, order);
},
},
};
</script>
```
在上面的例子中,我们使用了vxe-table的`sortable`属性来启用拖拽排序功能。当用户拖拽表格行时,`sort-change`事件会被触发,我们可以在事件处理函数中调用`table.sort`方法来实现排序。
vxe-table拖动排序
vxe-table是一个基于Vue.js的表格组件库,支持拖动排序功能。使用vxe-table实现拖动排序需要在表格中添加drag-config属性,并设置相关配置项。
具体步骤如下:
1. 在表格中添加drag-config属性,值为一个对象,包含以下配置项:
- sortable:是否开启拖动排序功能,默认为false。
- trigger:触发拖动排序的元素选择器,默认为'.vxe-table--wrapper'。
- list:排序的数据列表,必填项。
- group:分组名称,用于多个表格之间的拖动排序,默认为null。
- filter:过滤器函数,用于过滤不需要排序的行,默认为null。
- onDragStart:拖动开始时的回调函数。
- onDragEnd:拖动结束时的回调函数。
2. 在表格中添加drag-header-config属性,值为一个对象,包含以下配置项:
- sortable:是否开启拖动排序功能,默认为false。
- trigger:触发拖动排序的元素选择器,默认为'.vxe-table--header'。
- list:排序的数据列表,必填项。
- group:分组名称,用于多个表格之间的拖动排序,默认为null。
- filter:过滤器函数,用于过滤不需要排序的列,默认为null。
- onDragStart:拖动开始时的回调函数。
- onDragEnd:拖动结束时的回调函数。
3. 在表格中添加drag-row-config属性,值为一个对象,包含以下配置项:
- sortable:是否开启拖动排序功能,默认为false。
- trigger:触发拖动排序的元素选择器,默认为'.vxe-table--body tbody tr'。
- list:排序的数据列表,必填项。
- group:分组名称,用于多个表格之间的拖动排序,默认为null。
- filter:过滤器函数,用于过滤不需要排序的行,默认为null。
- onDragStart:拖动开始时的回调函数。
- onDragEnd:拖动结束时的回调函数。