Antd的table組件表格的序號(hào)自增操作
1,效果圖

2,實(shí)現(xiàn)方法
const columns = [
{
title: '序號(hào)',
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ǔ)充知識(shí):ant-design表格序號(hào)分頁(yè)連續(xù)自增設(shè)置
1、預(yù)期效果

2、設(shè)置表格的序號(hào)排序方式,我們首先是要到表格序號(hào)渲染的位置去修改
注意索引值需要+1

3、我所調(diào)用的方法是
所需要的參數(shù)是當(dāng)前的頁(yè)數(shù),當(dāng)前頁(yè)的大小,和索引值
export function serialNumber(pageIndex, pageSize, index){
return (pageIndex-1) * pageSize + index;
}
以上這篇Antd的table組件表格的序號(hào)自增操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03
vue中動(dòng)態(tài)select的使用方法示例
這篇文章主要介紹了vue中動(dòng)態(tài)select的使用方法,結(jié)合實(shí)例形式分析了vue.js使用動(dòng)態(tài)select創(chuàng)建下拉菜單相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-10-10
vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開(kāi)關(guān)狀態(tài)切換
本文主要介紹了vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開(kāi)關(guān)狀態(tài)切換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
vue+vant使用圖片預(yù)覽功能ImagePreview的問(wèn)題解決
這篇文章主要介紹了vue+vant使用圖片預(yù)覽功能ImagePreview的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用
這篇文章主要為大家介紹了Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
Vue3實(shí)現(xiàn)計(jì)算屬性的代碼詳解
計(jì)算屬性對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)算是經(jīng)常使用的一個(gè)能力了,本文將從代碼層面來(lái)給大家介紹下Vue3是如何實(shí)現(xiàn)計(jì)算屬性的,需要的朋友可以參考下2023-07-07
Vue實(shí)現(xiàn)下載文件而非瀏覽器直接打開(kāi)的方法
對(duì)于瀏覽器來(lái)說(shuō),文本、圖片等可以直接打開(kāi)的文件,不會(huì)進(jìn)行自動(dòng)下載,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)下載文件而非瀏覽器直接打開(kāi)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05

