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

相关推荐
云水一下7 小时前
HTML5 从入门到精通:语义为王——结构标签让网页会“说话”
前端·html5
Bigger7 小时前
mini-cc 的 Provider 抽象层是怎么设计的
前端·ai编程·claude
云水一下7 小时前
HTML5 从入门到精通:优化与扩展——资源加载、SEO 基础与无障碍入门
前端·html5
李白你好7 小时前
[特殊字符] XSS漏洞演示靶场 - 交互式XSS攻击演示平台,包含钓鱼攻击、Cookie窃取演示,适合安全教育教学
前端·安全·xss
JiaWen技术圈7 小时前
解析 React Composition Patterns
前端·react.js·前端框架
CoCo的编程之路7 小时前
像素级突围:如何利用智能前端开发助手最大化提升页面构建速度?
前端·人工智能·ai编程·智能编程助手·文心快码baiducomate
techdashen7 小时前
npm 生态遭遇供应链攻击:color 包被投毒,每周 3200 万次下载全部受影响
前端·npm·node.js
ze^07 小时前
Day05 APP应用&微信小程序&原生态开发&H5+Vue技术&封装打包&反编译抓包点
vue.js·微信小程序·小程序
UXbot7 小时前
轻量级原型工具如何支持Web应用的完整设计到开发链路
android·前端·人工智能·ios·交互·ui设计
边界条件╝7 小时前
前端构建引擎:从模块解析到产物生成
前端·javascript·vue.js·react.js