VTable使用问题：如何实现表格内容按数据记录排序？-灵析社区
素素数数表格中数据按照某一列进行排序，这个需求使用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 }
}
]
此时，对应列的表头上会显示排序按钮：
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/e586706edf09e786266da9b7f897bba0.png)
点击排序按钮，就可以在无排序、升序排序和降序排序三种状态中切换。
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)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/fa0e03bb34d848a6fb7c862f4a0ce406.png)
相关文档 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)