antd table按表格里的日期去排序操作
更新時間：2020年11月17日 10:00:51 作者：小年年年~~~
這篇文章主要介紹了antd table按表格里的日期去排序操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
表格內容
根據(jù)票據(jù)日期升序（這里是已經排序后的效果）
上代碼
代碼中data的內容如下
根據(jù)paper_date排序，因為目前這種格式不支持比較，需要先轉換成時間戳
new Date(aTimeString).getTime()
之后再用裝換后的時間戳去比較，比較用到的函數(shù)是 .sort，一下是用來比較的代碼
data.sort(function(a, b) {
let aTimeString = a.paper_date;
let bTimeString = b.paper_date;
let aTime = new Date(aTimeString).getTime();
let bTime = new Date(bTimeString).getTime();
return aTime - bTime;
});
附：知識用來記錄自己遇到的問題解決方法，大神勿噴
補充知識：antd的Table后端排序(列升降序)的坑
antd Table列升降序需要有個sorter屬性
由于分頁是后端分頁,因此,排序也必須用后端排序(因為前端獲取到的數(shù)據(jù)只有一頁,無法正確排序)
sorter: (a, b) => { // 啥也不寫,不需要前端排序,寫了sorter才會出現(xiàn)排序圖標},
這里會碰到一個坑,接口請求回來的數(shù)據(jù)明明已經排序正確了，傳給dataSource也是正常的，為什么渲染出來的是錯的? 因為前端又不完整的自行排序了一次
這時候sorter就不該寫成回調函數(shù)形式,而應該寫成sorter: true
const columns = [{
title: 'Name',
dataIndex: 'name',
filters: [{
text: 'Joe',
value: 'Joe',
}, {
text: 'Jim',
value: 'Jim',
}, {
text: 'Submenu',
value: 'Submenu',
children: [{
text: 'Green',
value: 'Green',
}, {
text: 'Black',
value: 'Black',
}],
}],
// specify the condition of filtering result
// here is that finding the name started with `value`
onFilter: (value, record) => record.name.indexOf(value) === 0,
// sorter: (a, b) => a.name.length - b.name.length,
sorter: true,
}]
那回調不寫，我應該在哪里發(fā)送后端排序請求呢？
<CustomTable // 封裝的表格組件，屬性是一樣的
rowKey='projId'
size="small"
style={{ height: tableHeight }}
columns={columns}
tableData={this.state.tableData}
expandedRowRender={this.expandedRowRender}
pagination={pagination}
handleTableChange={this.handleTableChange} // 在這里發(fā)送請求 處理后端排序
scroll={{ y: tableScrollHeight, x: 1660 }}
tableRowSelection={this.tableRowSelection}
/>
以上這篇antd table按表格里的日期去排序操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
validate?注冊頁的表單數(shù)據(jù)校驗實現(xiàn)詳解
這篇文章主要為大家介紹了validate?注冊頁的表單數(shù)據(jù)校驗實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了Vue中實現(xiàn)權限管理詳解,權限是對特定資源的訪問許可，所謂權限控制，也就是確保用戶只能訪問到被分配的資源,而前端權限歸根結底是請求的發(fā)起權，請求的發(fā)起可能有下面兩種形式觸發(fā),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue?tree封裝一個可選的樹組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家介紹了vue3封裝echarts組件最佳形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
基于Vue的SPA動態(tài)修改頁面title的方法(推薦)
這篇文章主要介紹了基于Vue的SPA動態(tài)修改頁面title的方法,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了使用Vue逐步實現(xiàn)Watch屬性詳解，watch對象中的value分別支持函數(shù)、數(shù)組、字符串、對象，較為常用的是函數(shù)的方式，當想要觀察一個對象以及對象中的每一個屬性的變化時，便會用到對象的方式2022-08-08
這篇文章主要給大家總結介紹了關于Vue Router的10條高級技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
vue如何使用mapbox對當前行政區(qū)劃進行反選遮罩
這篇文章主要介紹了vue如何使用mapbox對當前行政區(qū)劃進行反選遮罩問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue-cli3多頁面配置詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
前端Vue通過Minio返回的URL下載文件實現(xiàn)方法
Minio是一個靈活、高性能、開源的對象存儲解決方案,適用于各種存儲需求,并可以與云計算、容器化、大數(shù)據(jù)和應用程序集成,這篇文章主要給大家介紹了關于前端Vue通過Minio返回的URL下載文件實現(xiàn)的相關資料,需要的朋友可以參考下2024-07-07