当前位置:网站首页>Add a self incrementing sequence number to the antd table component

Add a self incrementing sequence number to the antd table component

2022-07-07 11:09:00 Have a good time I

The complete code is as follows :

<a-table :columns="columns" :data-source="students" :pagination="false" rowKey="id" @change="handleTableChange">
        <div slot="num" slot-scope="text, record, index">{
    {
     (currentPage - 1) * pageSize + (index + 1) }}</div>
        <div slot="action" slot-scope="text, item">
          <a-button type="link" :disabled="detail.status === 2" @click="handleDel(item)"> Delete </a-button>
          <a-button
            v-if="detail.type === 1"
            type="link"
            @click="pathTo('/classroom/flow/' + detail.id + '/' + item.id)"
          >
             Assembly line </a-button
          >
        </div>
      </a-table>
const columns = [
  {
    
    title: ' Serial number ',
    scopedSlots: {
     customRender: 'num' }
  },
  {
    
    title: ' Student number ',
    dataIndex: 'no',
    align: 'center',
    filters: [
      {
     text: ' Ascending ', value: 'no asc' },
      {
     text: ' Descending ', value: 'no desc ' }
    ],
    filterMultiple: false,
    filteredValue: filteredInfo.no || null
  },
  {
    
    title: ' full name ',
    dataIndex: 'name',
    align: 'center',
    filters: [
      {
     text: ' Ascending ', value: 'name asc' },
      {
     text: ' Descending ', value: 'name desc ' }
    ],
    filterMultiple: false,
    filteredValue: filteredInfo.name || null
  },
  {
    
    title: ' operation ',
    align: 'center',
    scopedSlots: {
     customRender: 'action' }
  }
]

From which Paging consecutive auto increment sequence number as follows :

   <div slot="num" slot-scope="text, record, index">{
    {
     (currentPage - 1) * pageSize + (index + 1) }}</div>

Every page from 1 Start

{ {index+1}}

原网站

版权声明
本文为[Have a good time I]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/02/202202130619539331.html