Ant Design Vue表格序号递增问题

render函数进行递增的时候是不支持跨页递增的，如果我们想要跨页递增是需要做的配置的，不过也很简单，下面看代码

1、columns属性配置

{title: '序号',dataIndex: 'num', key: 'num',width:80,scopedSlots: { customRender: 'num' },fixed: 'left'},

2、pagination分页设置

pagination: {
        total: 0,
        pageSize: 10,
        showTotal: (total) => {
          if (this.total) {
            return `共${this.total}条`
          }
          return `共${total}条`
        },
        defaultCurrent: 1,
        current: 1,
        pageSizeOptions: ['11', '21', '31', '51', '101', '201'],
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, size) => {
          const pager = { ...this.pagination }
          pager.current = current
          pager.pageSize = size
          this.pagination = pager
          this.cur_index = 0
          this.search()
        },
        buildOptionText: (size) => {
          return new Number(size.value) - 1 + '条/页'
        },
      },

3、table标签

<a-table
  :scroll="{ x: 1500 }"
  ref="table"
  :columns="billColumns"
  :rowKey="(row) => row.orderNo"
  :dataSource="billTableList"
  bordered
  @change="handleTableChange"
  :customRow="rowClick"
  :rowClassName="rowClassName"
  :pagination="false"
>
    <span slot="num" slot-scope="text, record, index">
      {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
    </span>
</a-table>

这样就完成了，下面看效果

 因为我在项目中是添加了一个合计行的，这个时候序号把合计行也带上了，这样是不对的，修改代码如下

<a-table
  :scroll="{ x: 1500 }"
  ref="table"
  :columns="billColumns"
  :rowKey="(row) => row.orderNo"
  :dataSource="billTableList"
  bordered
  @change="handleTableChange"
  :customRow="rowClick"
  :rowClassName="rowClassName"
  :pagination="false"
>
    <template slot="num" slot-scope="text, record, index">
        <!-- 有orderNo的代表不是合计行，我们这里只展示带订单号的 -->
        <span v-if="record.orderNo">
           {{(pagination.current - 1) * (pagination.pageSize - 1) + parseInt(index) + 1}}
        </span>
    </template>
</a-table>

看效果，合计行不计入序号啦