antd table按表格裡的日期去排序操作
阿新 • • 發佈:2020-11-18
表格內容
根據票據日期升序(這裡是已經排序後的效果)
上程式碼
程式碼中data的內容如下
根據paper_date排序,因為目前這種格式不支援比較,需要先轉換成時間戳
new Date(aTimeString).getTime()
之後再用裝換後的時間戳去比較,比較用到的函式是 .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屬性
由於分頁是後端分頁,因此,排序也必須用後端排序(因為前端獲取到的資料只有一頁,無法正確排序)
sorter: (a,b) => { // 啥也不寫,不需要前端排序,寫了sorter才會出現排序圖示},
這裡會碰到一個坑,介面請求回來的資料明明已經排序正確了,傳給dataSource也是正常的,為什麼渲染出來的是錯的? 因為前端又不完整的自行排序了一次
這時候sorter就不該寫成回撥函式形式,而應該寫成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,}]
那回調不寫,我應該在哪裡傳送後端排序請求呢?
<CustomTable // 封裝的表格元件,屬性是一樣的 rowKey='projId' size="small" style={{ height: tableHeight }} columns={columns} tableData={this.state.tableData} expandedRowRender={this.expandedRowRender} pagination={pagination} handleTableChange={this.handleTableChange} // 在這裡傳送請求 處理後端排序 scroll={{ y: tableScrollHeight,x: 1660 }} tableRowSelection={this.tableRowSelection} />
以上這篇antd table按表格裡的日期去排序操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。