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

相关推荐
去伪存真5 分钟前
从乱码到高精度检索:探矿业务中 TXT、Word、PDF 与网页的 RAG 清洗之道
前端·agent
两个西柚呀14 分钟前
JS事件总结
前端·javascript·css
小狼1545418 分钟前
拼多多订单数据导出 CSV 实战:接口分页、字段平铺与 5 个数据坑,多多开票助手
java·前端·javascript
ss27340 分钟前
AI全栈实战 | 2.2-02 React 思维模型:数据不可变 vs Vue 数据可变,两种哲学把复杂度推给谁
前端·vue.js·react.js
天衍四九-44 分钟前
Docker Compose企业实战系列(三):Vue/React前端项目容器化完整部署
前端·vue.js·docker
Rosanci1 小时前
从零到合入主线:我的 DeepSeek Harness 开源贡献实战手记
开发语言·前端·开源
用户960819842231 小时前
多周期联看时十字光标对不齐:前端排查「时间桶」的三步清单
前端
墨鱼老师1 小时前
SpringBoot+Vue 毕设项目开发踩坑记录(前后端分离)
vue.js·spring boot·毕业设计·课程设计·前后端分离·java 毕设
Data analyse4562 小时前
数据合规的敏感数据怎么识别?
前端·人工智能·数据分析
雪芽蓝域zzs2 小时前
Vue3 + Element Plus el-select 下拉弹窗
vue.js·elementui