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

相关推荐
qq_211387475 分钟前
基于LangGraph多agent
开发语言·前端·javascript·agent·langgraph
摸鱼仙人~21 分钟前
Vue Todo 实战练习教程(简略版)
前端·javascript·vue.js
dzj88822 分钟前
云朵字生成器-html
前端·css·html·云朵字
FlyWIHTSKY27 分钟前
Vue 3 单文件组件加载顺序详解
前端·javascript·vue.js
霪霖笙箫34 分钟前
真授之以渔:我是怎么从"想给文章配几张图",一步步做出一个可发布 skill 的
前端·人工智能·开源
yzin37 分钟前
【源码】【react】useCallback、useMemo、memo 原理
前端·react.js
CHU72903537 分钟前
扭蛋机盲盒小程序前端功能设计及核心玩法介绍
前端·小程序
毛骗导演40 分钟前
OpenClaw Gateway RPC 运行时:一个 WebSocket 协议引擎的深度解剖
前端·架构
码路飞41 分钟前
不会 Rust 也能玩 WebAssembly:3 个 npm install 就能用的 WASM 神器
前端·javascript·webassembly
sudo_jin42 分钟前
从“输入网址”到“帧级控制”:我对事件循环与主线程管理的终极认知
前端·javascript