ajax序号自增,请问如何实现在ant design vue表格组件上加一列序号列，让它自增？...

我想要实现，在第一列加上序号列(序号列不从后端传过来)，这个序号可以从1随后端传过来的项目数据自增，请赐教，不胜感激

项目管理

:style="{ margin: '13px 16px', background: '#fff', minHeight: '520px' }"

>

全部项目

待传值

待传值

:data-source="projectList"

:pagination="pagination"

:rowKey="record=>record.pId"

:style="{padding:'10px 0px',margin:'0px'}"

>

{{ ((this.current-1)*5)+(index+1)}}

进行中

已结束

查看详情

import layout from "@/layout/index"

import {getAllProjectsByPages} from '@/api/project'

const columns = [

{

title: '序号',

dataIndex: 'Id',

key: 'Id',

width:70,

scopedSlots: { customRender: 'Id' },

},

{

title: '比赛名称',

dataIndex: 'pRace',

key: 'pRace',

ellipsis: true,

width: 220,

// scopedSlots: { customRender: 'competition' },需要插入另加定义的才写

},

{

title: '项目名称',

dataIndex: 'pName',

key: 'pName',

width: 200,

ellipsis: true,

// ellipsis 显示省略符号来代表被修剪的文本。

},

{

title: '负责人',

dataIndex: 'uName',

key: 'uName',

width:90

},

{

title: '项目状态',

key: 'pState',

dataIndex: 'pState',

scopedSlots: { customRender: 'pState' },

width:90

},

{

title: '开始日期',

dataIndex: 'pStart',

key: 'pStart',

width:110,

showTime:false

},

{

title: '截止日期',

dataIndex: 'pEnd',

key: 'pEnd',

width:110

},

{

title: '操作',

key:'action',

dataIndex: 'action',

scopedSlots: {customRender: 'action'}

},

];

export default {

name: "index",

data(){

return{

// selectedRowKeys: [], // Check here to configure the default column

// 0是团队用户，1是管理员

u_identity:this.$route.params.u_identity,

projectList:[],

columns,

current:1,

pagination: {

current:1,

onChange: page => {

console.log('现在是第几页page:',page);

this.current=page;

console.log("this.current是当前的页数：",this.current)

this.getAllProjectsByPages(page,this.pagination.pageSize)

},

pageSize: 5,

total:0,

// total所有记录总数

// pageSize: 5,一页有5行

},

//卡片样式背景

cardBg:{

backgroundImage: "url("+require("../../../assets/images/cardBg.jpg")+")",

backgroundSize: 'cover',

opacity:'0.75',

color:'white',

fontSize:'18px',

},

cardBg2:{

backgroundImage: "url("+require("../../../assets/images/cardBg2.jpg")+")",

backgroundSize: 'cover',

opacity:'0.75',

color:'white',

fontSize:'18px',

},

cardBg3:{

backgroundImage: "url("+require("../../../assets/images/cardBg3.jpg")+")",

backgroundSize: 'cover',

opacity:'0.75',

color:'white',

fontSize:'18px',

},

}

},

components:{

layout

},

computed:{

// Id: function () {

//

// let projectId = 0

//

//

// projectId=((this.current-1)*5)+i+1

//

// return total

//

// }

},

mounted() {

this.getAllProjectsByPages(1,this.pagination.pageSize);

// console.log("传过来的projectList能到mounted吗")

// console.log("传过来的projectList：",this.projectList)

// this.data=this.projectList

},

methods:{

projectDetail(){

console.log("现在的用户状态："+this.u_identity)

this.$router.push({name:'projectDetail',params: { u_identity: this.u_identity }})

},

// 分页获取所有项目列表

getAllProjectsByPages(page,pageSize){

return new Promise((resolve, reject) => {

getAllProjectsByPages(page, pageSize).then(res => {

console.log("我回来啦,带来了res:",res)

console.log("res.data.list:",res.data.list)

this.projectList=res.data.list

console.log('this.projectList:',this.projectList)

this.pagination.total=res.data.totalRow

console.log("现有的总数据条数this.pagination.total:",this.pagination.total)

resolve()

}).catch(err => {

reject(err)

})

})

}

}

};

/deep/.ant-table-thead > tr > th{

text-align: center;

font-size: 13px;

font-weight: bold;

background: rgba(246, 249, 255, 1);

}

/deep/.ant-table-tbody > tr > td {

text-align: center;

font-size: 13px;

}

div#contentHeader{

box-shadow:#BBBBBB 0px 0px 10px;

padding:10px 20px;

margin-bottom: 30px;

}

span.cardTitle{

font-size:15px;

font-weight: bold;

}

img.cardIcon{

width:30px;

height:30px;

margin:5px

}

div#formContent{

box-shadow:#BBBBBB 0px 0px 10px;

padding:10px 5px;

}

div.search{

float:right;

margin-bottom: 20px;

}

div.projectTable{

margin:10px;

margin-top:20px

}

span.cardContent{

font-size:14px;

}

div.textContent{

padding:0px 10px;

margin-bottom: 10px;

}

此为对应的vue文件