antd-vue table显示序号（自动递增，分页后也不影响）

效果图：实现方法：<a-table:loading="tableLoading":columns="columns":data-source="tableData"rowKey="id":rowClassName="rowClassName":custo

String佳佳

5784人浏览 · 2021-03-04 17:07:45

String佳佳 · 2021-03-04 17:07:45 发布

效果图：

在这里插入图片描述

实现方法：


			    <a-table
                  :loading="tableLoading"
                  :columns="columns"
                  :data-source="tableData"
                  rowKey="id"
                  :rowClassName="rowClassName"
                  :customRow="customRow"
                  bordered>
                  <span slot="num" slot-scope="text,records,index">
                    {{ (currentPage-1)*pageSize+Number(index)+1 }}
                  </span>
                </a-table>



data:
	  currentPage: 1, // 当前第几页
      pageSize: 9, // 每页显示条数
      columns: [
	      {
		    title: '序号',
		    scopedSlots: { customRender: 'num' }
		  },
		  {
		    title: '标签名称',
		    dataIndex: 'name',
		    key: 'name'
		  },
		  {
		    title: '',
		    key: 'action',
		    scopedSlots: { customRender: 'action' }
		  }
      ]