序言:
最近使用antd-vue进行开发,在使用表格组件Table时,遇到了一个问题,就是表格组件自带分页器,而且分页器的样式和我想要的不一样(应该是和产品要的不一样),比如
自带的是这样的:
需求是这样的:
实现过程:
1、引入Table组件(我是按需引入的)
main.js
import Table from 'ant-design-vue'
Vue.use(Table);
2、附上页面组件代码
在a-table标签内使用:pagination="pagination"
绑定分页器属性,然后在data
中进行pagination
属性的设置,具体配置参考antd-vue
中pagination
中的api
链接直达Pagination 分页
注意:!!!我这里只是附上分页器的配置代码,没有表格列和行的配置,具体使用请参考Table 表格
<template>
<a-table :columns="columns" :data-source="dataSource" :pagination="pagination" >
</a-table>
</template>
<script>
export default {
data() {
return {
pagination:{ //表格自带分页器的属性定义
defaultPageSize:2, //默认每页显示10条数据
showTOtal:total=>`共${total}条数据`,
showSizeChanger:true,
pageSizeOptions:['10','15','20','30'], //自定义每页显示多少条数据
onShowSizeChange:(current,pageSize)=>this.pageSize=pageSize,
showQuickJumper:true, //允许跳转至xx页
total:500, //总数
},
}
</script>
博客记录代码,代码记录生活,一切都是为了改BUG