四种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指定排序顺序。

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