关于Vue ElementUI表格后台排序详解

ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据

<el-table @sort-change='sortChange'>
       <el-table-column sortable='custom' prop="dateTime" label="时间">
       </el-table-column>
</el-table>

sort-change方法自带三个参数,分别代表意义是:

column:当前列

prop:当前列需要排序的数据

order:排序的规则(升序、降序和默认[默认就是没排序])

sortChange: function(column, prop, order) {
    // console.log(column + '-' + column.prop + '-' + column.order)
},

column.order是可以经过点击排序按钮后拿到的,然后就可以发送column.order给后台,后台再根据什么排序来返回排序过后的数据。

 

*补充:因为排序默认有三种排序,关于去掉默认排序,可以试试修改这个属性sort-orders,它默认有三个值的:

['ascending', 'descending', null],可以去掉最后一个null值。

温馨提醒:此补充仅当 sortable 为 true 时有效,就是说只适用于后台排序。

评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值