vxe-table拖动排序
时间: 2023-10-30 08:08:02 浏览: 186
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:拖动结束时的回调函数。
阅读全文