四种el-table的配置排序方式

一:sortable="custom" 和 @sort-change="sortChange"

如果需要后端排序,需将sortable设置为custom,同时在 Table

上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。

二::default-sort="{prop: 'salesVolume', order: 'descending'}"

通过 Table 的default-sort属性设置默认的排序列和排序顺序

三::sort-orders="['descending','ascending']"

传入一个数组,随着用户点击表头,该列依次按照数组中元素的顺序进行排序。数组中的元素需为以下三者之一:ascending表示升序,descending 表示降序,null 表示还原为原始顺序,

'ascending', 'descending', null

四:ref="table" ,this.$refs.table.sort('salesVolume','descending');

sort,手动对 Table 进行排序。参数prop属性指定排序列,order指定排序顺序。

相关推荐
Ticnix6 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人6 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl7 小时前
OpenClaw 深度技术解析
前端
崔庆才丨静觅7 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人7 小时前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼7 小时前
shadcn/ui,给你一个真正可控的UI组件库
前端
布列瑟农的星空7 小时前
前端都能看懂的Rust入门教程(三)——控制流语句
前端·后端·rust
Mr Xu_7 小时前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus7 小时前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空7 小时前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范