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

心悦琴
  • 67

image.png
我想要实现,在第一列加上序号列(序号列不从后端传过来),这个序号可以从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.png" alt="fileIcon.png" 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文件

回复
阅读 1k
2 个回答
<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内部的数组得自己就算下,结合你的pagesize

数据源是 projectList,它来自 Ajax 的返回 res.data.list,所以只需要在每行数据里加序号就行了哇。既然列定义中序号列的 keyId,那么

this.projectList = res.data.list
    ?.map(
        (it, index) => ({ ...it, Id: index + 1 })
    );
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏