实习随笔-7、Antd-vue表格分页器设置

序言:

最近使用antd-vue进行开发,在使用表格组件Table时,遇到了一个问题,就是表格组件自带分页器,而且分页器的样式和我想要的不一样(应该是和产品要的不一样),比如
自带的是这样的:
在这里插入图片描述
需求是这样的:
在这里插入图片描述

实现过程:

1、引入Table组件(我是按需引入的)
main.js

import Table from 'ant-design-vue'
Vue.use(Table);

2、附上页面组件代码
在a-table标签内使用:pagination="pagination"绑定分页器属性,然后在data中进行pagination属性的设置,具体配置参考antd-vuepagination中的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

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值