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

相关推荐
软件技术NINI2 分钟前
html知识点框架
前端·html
深情废杨杨6 分钟前
前端vue-插值表达式和v-html的区别
前端·javascript·vue.js
GHUIJS6 分钟前
【vue3】vue3.3新特性真香
前端·javascript·vue.js
众生回避12 分钟前
鸿蒙ms参考
前端·javascript·vue.js
洛千陨13 分钟前
Vue + element-ui实现动态表单项以及动态校验规则
前端·vue.js
GHUIJS1 小时前
【vue3】vue3.5
前端·javascript·vue.js
&白帝&1 小时前
uniapp中使用picker-view选择时间
前端·uni-app
魔术师卡颂2 小时前
如何让“学源码”变得轻松、有意义
前端·面试·源码
谢尔登2 小时前
Babel
前端·react.js·node.js
ling1s2 小时前
C#基础(13)结构体
前端·c#