请问如何实现在ant design vue表格组件上加一列序号列，让它自增？
我想要实现，在第一列加上序号列（序号列不从后端传过来），这个序号可以从1随后端传过来的项目数据自增，请赐教，不胜感激
<template><layout>
<div id="layout-inner">
<a-breadcrumb style="margin:0;margin-top:10px;margin-left:16px;text-align: left">
<a-divider type="vertical" style="background-color: #FF944B;width: 3px;border-radius: 8px"/>
<a-breadcrumb-item>项目管理</a-breadcrumb-item>
</a-breadcrumb>
<a-layout-content
:style="{ margin: '13px 16px', background: '#fff', minHeight: '520px' }"
>
<div id="content">
<div id="contentHeader">
<img src="../../../icons/fileIcon.jpg" alt="请问如何实现在ant design vue表格组件上加一列序号列，让它自增？" class="cardIcon">
<span class="cardTitle">全部项目</span>
<a-row :gutter="16">
<a-col :span="8" >
<a-card title="正在进行中的项目" :bordered="false" :style="cardBg">
<span>待传值</span>
</a-card>
</a-col>
<a-col :span="8" >
<a-card title="已结束的项目" :bordered="false" :style="cardBg2">
<span>待传值</span>
</a-card>
</a-col>
</a-row>
</div>
<div id="formContent">
<div class="search">
<a-input-search placeholder="请输入搜索内容" enter-button @search="onSearch" :style="search" />
</div>
<div class="projectTable">
<template>
<a-table :columns="columns"
:data-source="projectList"
:pagination="pagination"
:rowKey="record=>record.pId"
:style="{padding:'10px 0px',margin:'0px'}"
>
<template slot="Id" slot-scope="text, record,index">
<span>{{ ((this.current-1)*5)+(index+1)}}</span>
</template>
<template slot="pState" slot-scope="text, record">
<div>
<a-tag v-if="record.pState===0" color="green">进行中</a-tag>
<a-tag v-if="record.pState===1" color="red">已结束</a-tag>
</div>
</template>
<template slot="action" slot-scope="">
<a-button type="primary" @click="projectDetail" :style="{padding: '4px',fontSize: '10px'}">查看详情</a-button>
</template>
</a-table>
</template>
</div>
</div>
</div>
</a-layout-content>
</div>
</layout>
</template>
<script>
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)
})
})
}
}
};
</script>
<style scoped>
/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;
}
</style>
此为对应的vue文件
回答：
<a-table bordered :data-source="data"> <a-table-column key="DataIndex" title="序号">
<template slot-scope="text, record, index">
<span>{{index + 1}}</span>
</template>
</a-table-column>
</a-table>
如果你需要分页序号对应
那么span内部的数组得自己就算下，结合你的page和size
回答：
数据源是 projectList，它来自 Ajax 的返回 res.data.list，所以只需要在每行数据里加序号就行了哇。既然列定义中序号列的 key 是 Id，那么
this.projectList = res.data.list ?.map(
(it, index) => ({ ...it, Id: index + 1 })
);
以上是 请问如何实现在ant design vue表格组件上加一列序号列，让它自增？ 的全部内容， 来源链接： utcz.com/p/935815.html
