ant design vue的table取消自带分页问题

2024-11-27 15:28:51

ant design vue的table取消自带分页

在我们使用ant design vue的table组件的时候会发现：

组件使用如示：

<a-table :columns="columns" :data-source="data" bordered></a-table>

显然并没有配置pagination属性，那为什么会出现分页器呢？

这是因为：

组件默认开启了分页，你不但可以通过 pagination 配置显示或隐藏，还可以配置显示位置。

如果需要，还可以同时配置上下同时显示分页。

组件自带分页功能，并默认开启。

那我们有时候数据量不大，根本不想有分页器的存在该怎样把它取消呢？

在使用table组件的时候，配置:pagination="false" 即可。

效果如下：

注意是：:pagination=“false” 噢！！！

题外话：

其实，我们最该细细研读官方文档。

使用组件的时候遇到问题，我们首先要去看文档内相关配置项的介绍。

再根据配置项的默认值和数据类型，就能处理大部分遇到的问题

就像我记录的这些问题，一方面是给遇到同样问题的小伙伴提供一个解决方案，另一方面也是给自己一个警醒，避免下次再出现同样的问题。

通过我多次遇到的问题，发现解决问题在于思路的选取：

组件：官方文档—>配置项介绍—>默认值 / 数据类型
报错：错误位置—>报错内容—>官方组件使用问题 / 自定义组件注册问题 / 配置项 / 数据类型

ant design vue table分页

ant design vue table分页设置

1、设置pagination

 <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" :pagination="pagination">
     <a slot="action" href="javascript:;" rel="external nofollow" >查看</a>
     <img  style="width:20px;heigth:20px" slot="pic" slot-scope="text" :src=text />
  </a-table>

2、自定义pagination，注意写成onChange,change不行，灰色部分请根据自己实际代码修改。

data () {
    let self = this
    return {
      collapsed: false,
      data,
      sels,
      columns,
      rowSelection,
      pagination: {
        pageNo: 1,
        pageSize: 20, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: total => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示
        onChange:(page,pageSize)=>this.onPageChange(page,pageSize),//点击页码事件
        total:0 //总条数
       }
    }
  },
methods: {
 	onPageChange(page, pageSize) {
      this.pagination.pageNo = page
       this.getList()
   },
   onSizeChange(current, pageSize) {
       this.pagination.pageNo = 1
       this.pagination.pageSize = pageSize
       this.getList()
   }
}

3、Ajax读取数据列表时，pagination.total赋总条数即可

.then((response) => {
          this.data = response.data.items
          this.pagination.total=response.data.totalNum
          console.log(response)
        })

4.读取数据时带上当前页、分页大小，过滤条件，后端代码可以简单使用通用分页方法返回Json数据即可

getList () {
      let filter= {xxx:this.queryParam.xxx,curPage:this.pagination.pageNo,pageSize:this.pagination.pageSize};// 请求参数
      console.log(filter)
      this.getData(filter)
    },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

ant-design-vue 快速避坑指南(推荐)

ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致. 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目. 本文主要目的是总结一些开发过程中比较耗时间去查找,文档中没有具体说明的常见问题,同时希望能给新上手此框架的同学提供一些参考作用. 1.Table对接后台返回数据针对Table数据格式与后他接口返回数据格
关于Ant-Design-Vue快速上手指南+排坑

目录前言 NO.1 表单组件如何自定义表单校验规则表单回显提交表单 NO.2 表格(Table) NO.3 Spin组件打包优化结语前言公司要开发一个后台管理系统,对于UI库的选择上选择了颜值爆表的Ant-Design-Vue作为整个项目UI库,但谁曾想,暗中的坑一个接一个,文档也不怎么详细,可能习惯了element-ui的掘友们也许不怎么好适应,本文就带大家一起学习如何高效使用Ant-Design-Vue. NO.1 表单组件首先就来说说最常用的Form组件的正确使用姿势:
ant design的table组件实现全选功能以及自定义分页

我就废话不多说了,大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.st
Ant Design的Table组件去除

在Ant Design的Table组件文档中,排序有三种状态:点击升序.点击降序.取消排序.一般需求只需要升序和降序,不需要取消排序,这时候就需要我们设置sortOrder来去除取消排序. 首先,我们从官方文档中ctrl+c出一个排序栗子,放在我们的组件中. 官方栗子 import React, { useEffect, useState } from 'react'; import { Table } from 'antd' export default () => { const [data
ant design vue的table取消自带分页问题

目录 ant design vue的table取消自带分页题外话: ant design vue table分页 ant design vue table分页设置 ant design vue的table取消自带分页在我们使用ant design vue的table组件的时候会发现: 组件使用如示: <a-table :columns="columns" :data-source="data" bordered></a-table> 显然
ant design vue 表格table 默认勾选几项的操作

为什么我同样的功能要用react .vue 都写一遍 ? 啊我真是不是闲的蛋疼啊(- o -)~zZ 在 ant design vue 中,表格的第一列是联动的选择框截一张官方文档图,图示最后一排就是禁用状态点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组. onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedR
Ant Design Vue中的table与pagination的联合使用方式

目录 Ant Design Vue中table与pagination联合使用 ant.design.vue中table的使用说明 table的创建 table之columns table之dataSource table之loading table之scroll table之rowKey table之rowSelection table之customRow table之change Ant Design Vue中table与pagination联合使用表格table使用链接:ant desig
Ant design vue table 单击行选中勾选checkbox教程

最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传期望:Ant design table 单击行选中勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th
Ant design vue中的联动选择取消操作

项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType">  <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag
Ant Design Vue table中列超长显示...并加提示语的实例

我就废话不多说了,大家还是直接看代码吧~ <template> <a-row class="a-left"> <a-row> <p class="a-title">今日考勤状况</p> <a-row type="flex" justify="space-around"> <a-col :span="4" class="b
ant design vue嵌套表格及表格内部编辑的用法说明

实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan
ant design vue中表格指定格式渲染方式

注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index
解决ant design vue 表格a-table二次封装,slots渲染的问题

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&
ant design vue导航菜单与路由配置操作

此功能包含: 1.根据动态路由自动展开与自动选择对应路由所在页面菜单 2.只展开一个子菜单 3.兄弟组件控制菜单与路由 <a-menu :openKeys="openKeys" :selectedKeys="selectedKeys" mode="inline" theme="dark" :inlineCollapsed="$store.state.isCollapse" @click='select

ant design vue的table取消自带分页问题

目录