Element UI设置列表时间倒序/正序排序展示

在ElementUI的el-table组件中,通过设置:sortable为true开启列排序,并使用:sort-by属性配合负号(-)指定降序排列,例如-paixuDate,确保日期数据以时间戳形式存储以保证正确排序。
摘要由CSDN通过智能技术生成

在 Element UI 的 el-table 中,可以通过设置 :sort-by 属性来指定表格列的排序属性。那么,如果要按时间倒序排序,只需要将 :sort-by 属性设置为日期字段名,同时在这个字段前加上符号“-”,表示降序排列。

因此,可以按以下步骤实现将 el-table-column 根据时间倒序排序:

  1. 在 el-table-column 上设置 :sortable 属性为 true,开启该列排序功能。
 

html复制代码

<el-table-column label="待排序日期" align="center" prop="paixuDate" :sortable="true"/>

  1. 在 el-table-column 上设置 :sort-by 属性为降序排序的日期字段名(即带有“-”的日期字段名)。
 

html复制代码

<el-table-column label="待排序日期" align="center" prop="paixuDate" :sortable="true" :sort-by="'-paixuDate'"/>

这样就可以实现对 el-table-column 按时间倒序排序了。最后,需要注意的是,使用 Element UI 的 el-table 进行排序时,日期数据需要以时间戳形式进行排序,否则会出现不正确的排序结果。

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值