VTable使用问题：如何实现表格内容按数据记录排序？-灵析社区

## 解决方案 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. 通过`updateSortState`api 配置`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](https://link.segmentfault.com/?enc=JF08Frb6%2FX9xdxaoqIZBDA%3D%3D.bXAXoNnmy9yGkbIlFhvfGVcZNVf6Ax3XWHP9kiF4aEnbE3s6YfeDZrE9nBW1BdY%2B)  ## 相关文档 Related Documentation 表格排序 demo：[https://visactor.io/vtable/demo/basic-functionality/sort](https://link.segmentfault.com/?enc=akK2pf2bR8%2B3uz22ZnW7RQ%3D%3D.jQ2wC9PoDvU0Kdyfy0%2FsWmj2ClLBHGuR%2FLLx%2BOe%2FRXia0ZRIQjvJCZuxJt1qUIMmeJmznTb7zwTElEMOjFx86A%3D%3D) 排序功能教程：[https://visactor.io/vtable/guide/basic_function/sort](https://link.segmentfault.com/?enc=BJ%2F%2B5ZjhoWMAtBrwXYfAhw%3D%3D.ES7%2Fq2CmrjijPb2BVZp01cxxEhke0OHn%2B9y%2Bl9AaSyW9K%2F3PEmpfiL90qc43vvbZLUKuHag0dlEJYjs8DnKKAg%3D%3D) github：[https://github.com/VisActor/VTable](https://link.segmentfault.com/?enc=Hm8UYHf6AtETcipLLtJIdg%3D%3D.954Q3IwJjlz8sgjz7%2BbjDmeo9pSkNdiJ9AUE78Usd4gu3jiohYZfl%2B7pTzw8QhW5)