有序号的table,前端分页

<a-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :bordered="bordered"
        :rowKey="(record,index) => record.id"
      >
        <template slot="slotProps"></template>
        <template slot="action">
          <div class="btnbox">
            <a href="javascript:;" @click="deleteCharacter(record, index)">
              删除
            </a>
            <a href="javascript:;" @click="lookUser(record, index)"> 查看 </a>
          </div>
        </template>
      </a-table>

js

<script>
const columns = [
  {
    title: "序号",
    align:"center",
    customRender: (text, record, index)=>{
        return `${index+1}`
    }
  },
  {
    title: "角色名称",
    align:"center",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "创建时间",
    align:"center",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    title: "更新时间",
    align:"center",
    dataIndex: "updateTime",
    key: "updateTime",
    ellipsis: true,
  },
  {
    title: "操作",
    align:"center",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  data() {
    return {
      bordered: true,
      pagination:true,
      dataSource: [
        {
          id: 201,
          name: "张三",
          createTime: "2021/11/11",
          updateTime: "2021/11/12",
        },
        {
          id: 202,
          name: "李四",
          createTime: "2021/11/10",
          updateTime: "2021/11/12",
        },
      ],
      columns,
    };
  },
};
</script>