Antd使用table組件實(shí)現(xiàn)表格序號自增

發(fā)布時(shí)間：2020-10-28 14:59:57 來源：億速云閱讀：1525 作者：Leah 欄目：開發(fā)技術(shù)

Antd使用table組件實(shí)現(xiàn)表格序號自增？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

1，效果圖

2，實(shí)現(xiàn)方法

const columns = [
  {
  title: '序號',
  render:(text,record,index)=>`${index+1}`,
  },
  {
  title:'操作',
  dataIndex:'delete',
  key:'delete',
  render: (text,record) => (
   <span>
   <Link to={{ pathname : '/info/Edit' , query : { id : record.id }}}> 刪除</Link>
   </span>
  ), 
  }, 
 ];

補(bǔ)充知識：ant-design表格序號分頁連續(xù)自增設(shè)置

1、預(yù)期效果

Antd使用table組件實(shí)現(xiàn)表格序號自增

2、設(shè)置表格的序號排序方式，我們首先是要到表格序號渲染的位置去修改

注意索引值需要+1

Antd使用table組件實(shí)現(xiàn)表格序號自增

3、我所調(diào)用的方法是

所需要的參數(shù)是當(dāng)前的頁數(shù)，當(dāng)前頁的大小，和索引值

export function serialNumber(pageIndex, pageSize, index){
 return (pageIndex-1) * pageSize + index;
}

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

Antd使用table組件實(shí)現(xiàn)表格序號自增

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽