antd table按表格里的日期去排序操作

更新時(shí)間：2020年11月17日 10:00:51 作者：小年年年~~~

這篇文章主要介紹了antd table按表格里的日期去排序操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

表格內(nèi)容

根據(jù)票據(jù)日期升序（這里是已經(jīng)排序后的效果）

上代碼

代碼中data的內(nèi)容如下

根據(jù)paper_date排序，因?yàn)槟壳斑@種格式不支持比較，需要先轉(zhuǎn)換成時(shí)間戳

new Date(aTimeString).getTime()

之后再用裝換后的時(shí)間戳去比較，比較用到的函數(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;
     });

附：知識(shí)用來記錄自己遇到的問題解決方法，大神勿噴

補(bǔ)充知識(shí)：antd的Table后端排序(列升降序)的坑

antd Table列升降序需要有個(gè)sorter屬性

由于分頁是后端分頁,因此,排序也必須用后端排序(因?yàn)榍岸双@取到的數(shù)據(jù)只有一頁,無法正確排序)

sorter: (a, b) => { // 啥也不寫,不需要前端排序,寫了sorter才會(huì)出現(xiàn)排序圖標(biāo)},

這里會(huì)碰到一個(gè)坑,接口請求回來的數(shù)據(jù)明明已經(jīng)排序正確了，傳給dataSource也是正常的，為什么渲染出來的是錯(cuò)的? 因?yàn)榍岸擞植煌暾淖孕信判蛄艘淮?/p>

這時(shí)候sorter就不該寫成回調(diào)函數(shù)形式,而應(yīng)該寫成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,
}]

那回調(diào)不寫，我應(yīng)該在哪里發(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按表格里的日期去排序操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: