Vue + Ant Design Vue 的分页pagination

table 的分页属性pagination

如上图，是用Ant Design创建表格时的分页，下面是我在做项目结合后台给的接口写的代码：

      <a-table:pagination="paginationOpt":columns="columns":dataSource="data"bordered :rowKey="record => record.id"size="small"></a-table>

pagination 是分页器属性，paginationOpt是他的值，在data中设置他的值

点击查看分页的api https://www.antdv.com/components/pagination-cn/#api

export default {data () {return {paginationOpt: {defaultCurrent: 1,  // 默认当前页数defaultPageSize: 10,   // 默认当前页显示数据的大小total: 0, // 总数，必须先有showSizeChanger: true,showQuickJumper: true,pageSizeOptions: ['10', '20', '30', '40'],showTotal: total => `共 ${total} 条`, // 显示总数onShowSizeChange: (current, pageSize) => {this.paginationOpt.defaultCurrent = 1this.paginationOpt.defaultPageSize = pageSizethis.getList()  //显示列表的接口名称}, // 改变每页数量时更新显示onChange: (current, size) => {this.paginationOpt.defaultCurrent = currentthis.paginationOpt.defaultPageSize = sizethis.getList()} // 点击页码事件}}},methods: {// 查询列表getList () {const list = { ...this.order }const { defaultCurrent, defaultPageSize } = this.paginationOptlist.page = JSON.stringify({size: defaultPageSize,current: defaultCurrent})// orderList是后台的接口orderList(list).then(res => {const { total = 0, records = [] } = res.result.datasthis.paginationOpt.total = totalthis.data = records  //data 是table的dataSource值})}}
}

Vue + Ant Design Vue 的分页pagination相关推荐

2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点拖拽播放桌面歌词 mini模式自定义托盘右键菜单任务栏缩略图,歌曲操作音频可视化自动/手动检查更新 Nedb数据库持久化自定义安装路径,安装界面美化浏览器中启动客户端 Travis ...
[Ant Design Vue]Ant Design Vue搭建项目
一.为什么要用Ant Design 1.因为它是蚂蚁金服产出的一套牛逼哄哄的产品 2. 丰富的组件化设计规范和组件化编码规范 3.它适用于企业级的中后台搭建二.快速创建项目 1.安装脚手架 npm ...
关于vue ant design vue 与谷歌浏览器最新版table表格超出长度错位的问题
ant vue 表格超出长度不会超出隐藏-省略,ellipsis不起作用解决方案: .textEllipsis {overflow: hidden;text-overflow: ellipsis;d ...
Vue - Ant Design Vue 中＜a-select＞选择器组件，既可从下拉列表选择，又可输入手动输入文本（既可下拉选择又可自己输入）
前言网上的代码基本上都是无效的,且代码非常乱还有bug. 这种需求其实不算太常见,网上基本没有相关文章, 本文给您提供一样详细的示例,您可以快速移植到您的项目中. 如果您要实现如下图所示既可下拉选 ...
vue + ant design vue 搭配 less 动态自定义主题颜色
今天搞了一下午,终于搞成功了
vue+ Ant Design Vue实现拖拽树形图
之前一直是用elelement-ui实现树形图,现在需求需要修改为antd UI组件实现,在开发过程中出来了好几个坑,记录一下. 首先看一下要实现的效果: 1.可拖拽: 2.点击节点高亮,且点击请求当 ...
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
vue3 UI组件库 Ant Design of Vue Ant Design Vue
ant design Vue 纯前端实现分页
ant design Vue 纯前端实现分页功能 (有选择的话最好让后端分页,前端分页可能会有问题,为了性能,尽量不要前端分页) 自己想的一个简单方法: 通过页码改变事件,每页数据个数改变事件,获取改 ...
ant design vue table分页
ant design vue table分页设置 1.设置pagination <a-table :columns="columns" :dataSource="d ...

Vue + Ant Design Vue 的分页pagination

table 的分页属性pagination

Vue + Ant Design Vue 的分页pagination相关推荐

最新文章

热门文章