前端 - VTable使用问题：如何实现表格内容按数据记录排序？

Question

表格中数据按照某一列进行排序，这个需求使用VTable要怎么实现？

Answer 1

解决方案 Solution

在VTable中，可以通过三种方式来实现数据排序功能：

1. 通过表格内ui实现

在columns中配置sort属性，支持配置true使用默认排序规则，也可以配置函数来自定义排序规则：

// ......columns: [    {      field: 'id',      title: 'ID',      width: 120,      sort: true    },    {      field: 'name',      title: 'Name',      width: 120,      sort: (a, b) => { return a - b }    }]

此时，对应列的表头上会显示排序按钮：

点击排序按钮，就可以在无排序、升序排序和降序排序三种状态中切换。

2. 通过在初始化option中配置sortState实现

在columns中配置sort属性后，可以在option中配置sortState属性：

sortState:{    field: 'Category',    order: 'asc'}

其中，field是排序对应的数据源；order是排序规则，支持 asc 升序、desc 降序 和normal 不排序。

3. 通过updateSortStateapi 配置sortState

在columns中配置sort属性后，可以通过表格实例的updateSortState方法，随时配置sortState，更新排序效果：

instance.updateSortState({  field: 'id',  order: 'desc',});

代码示例 Code Example

const columns = [  {    field: "id",    title: "ID",    width: 80,    sort: true  },  {    field: "hobbies",    title: "hobbies",    width: 300  }];const option: TYPES.ListTableConstructorOptions = {  records,  columns,  sortState:{    field: 'id',    order: 'asc'  }};const instance = new ListTable(document.getElementById("container"), option);setTimeout(() => {  instance.updateSortState({    field: 'id',    order: 'desc',  });}, 3000);

结果展示 Results

在线效果参考：https://codesandbox.io/s/vtable-sort-w869fk

相关文档 Related Documentation

表格排序 demo：https://visactor.io/vtable/demo/basic-functionality/sort

排序功能教程：https://visactor.io/vtable/guide/basic_function/sort

github：https://github.com/VisActor/VTable