vue使用antd表格自定义分页

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>