vue使用antd表格自定义分页

效果图

代码

<template>
  <div class="home">
      <a-table
         :pagination="pagination" 
         :columns="Projectcolumns" 
         :data-source="Projectdata" 
         :bordered='true' >
         <template slot="operation" slot-scope="text, record">详情</template>
       </a-table>
  </div>
</template>

<script>
const Projectcolumns = [
  { 
    title: '名字', 
    dataIndex: 'pname', 
    key: 'pname', 
    align:'center', 
  },{ 
    title: '年龄', 
    dataIndex: 'age', 
    key: 'age', 
    width:'20%',
    align:'center',
  },{ 
    title: '操作', 
    dataIndex: 'operation', 
    key: 'operation', 
    width:'20%',
    align:'center',
    scopedSlots: { customRender: 'operation' },// 直接对应插槽名为operation的模板
  }
];

const Projectdata = [];

for (let i = 0; i < 100; i++) {
  Projectdata.push({
    key: i.toString(),
    pname: `Edrward ${i}`,
    age: 32,
  });
}

export default {
  data() {
    return {
      Projectdata,
      Projectcolumns,
      pagination:{
        defaultPageSize:4,  //默认的每页条数
        total:100,   //数据总数
        size:'small',   //分页尺寸
        showSizeChanger:true,   //是否可以改变 pageSize
        pageSizeOptions:['2','4','8','10'], //指定每页可以显示多少条
        showQuickJumper:true,  //是否可以快速跳转至某页
      },
    };
  },
  methods: { },
}
</script>