ant design 中的table中的分页

 <Row>  {base ? <Table columns={base.columns} dataSource={base.data} style={{ marginTop: 10 }} pagination={{
                  simple:false,
                  current:basePagination.current,
                  total:basePagination.total,
                  pageSizeOptions:[‘10‘,‘20‘,‘30‘,‘40‘,‘50‘],
                  showSizeChanger:true,
                  pageSize:basePagination.pageSize,
                  showTotal: (count=basePagination.total)=>{
                    return ‘共‘+count+‘条数据‘
                  },
                  //onChange:ChangePage(),
                  onChange:(current,pageSize)=>{
                    onBaseClick(current,pageSize)
                  }
                }}/> : <Empty />} </Row>

调用的方法(分页点击的):

function onBaseClick(current,pageSize){
    dispatch({
      type: "customerProtectLog/queryBase",
      payload: {
        current:current,
        pageSize:pageSize
      }
    })
  }

这个只是一个table的展示,其中这里面自己遇到的问题有:

1、pageSizeOptions不显示,这个可以看官网,数组是字符串数组,所以参数要传正确

2、还有就是方法onChange,这里遇到的问题是注释掉的代码,调用这个会持续请求后端接口    结果浏览器卡住。。。

3、注意自己调用参数的顺序,这都是坑

原文地址:https://www.cnblogs.com/notchangeworld/p/11609392.html

时间: 2024-11-05 21:59:07

ant design 中的table中的分页的相关文章

◆◆0如何在smartform中的table节点插入分页

众所周知,在smartforms的loop节点中可以插入一个command node用来强制分页,那么如何在table节点中插入分页的command node呢? 下面简单介绍一下,这要利用到table节点的sort event,如下: 在table节点的data tab页中勾上event on sort end,别忘了输入要排序的字段,然后就会在左边table节点的最后出现一个Event on Sort End的节点,在这个下面插入command node进行分页就可以了. 值得注意的是: 1

【20180626】 pt-table-sync 和slave中的table中的字段存在表情包乱码

基于MySQL主从数据不一致 MySQL5.6 binlog statment格式 主从架构,table的字符集是utf8mb4 插入表情符号的时候,slave无法识别,显示乱码 猜想可能是因为binlog字符集默认是utf8格式的.写入binlog的时候就已经乱码 table的字符集是utf8,并且设置某个字段的字符集类型是utf8mb4.在这个字段插入表情,并且进行pt2.2.19 主从数据同步的时候生成的DML语句也无法识别表情包显示乱码. 实验结果 猜想1不成立,因为binlog的写入都

Element ui 中使用table组件实现分页记忆选中

我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 首先定义个data值 data () { return { multipleSelectionAll: [], // 所有选中的数据包含跨页数据 idKey: 'personId' // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下) } } 方法中定义以下: methods : { // 设置选中的方法 setSelectRow() { if (!this.multi

Ant Design of Vue —— Table表格组件 —— 设置动态表头

Column配置 比如:操作列 { key: 'action', scopedSlots: { customRender: 'action', title: '变量名' }, align: 'center' } 代码段 <template slot="变量名">{{动态表头名称}}</template> 原文地址:https://www.cnblogs.com/duoer/p/12096895.html

js的传值,table中tr的遍历,js中动态创建数组

1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)");//取消选中var ary;if (crival_number.indexOf(fnumber) > 0) { var fnumbers = crival_number.split(",");//然后做的操作便是从crival_number中去掉相对应的numberary

让div中的table居中

div 标签上写  style="text-align:center" div中的table中写 style="margin:auto;"  <table  style="margin:auto;"  margin代表 外边距 顺时针方向数  上 右 下 左   一共可以写四个. http://www.w3school.com.cn/cssref/pr_margin.asp

element-ui 中的table的列隐藏问题

element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条还有一段距离.所以希望能够切换到简短列可以方便的看见比较重要的几列的内容.用之前的方法<bootstrap>的话,非常简单,直接设置display的显示和隐藏就可以了. 但是放在element-ui中来就不可行了.每一列根本不能直接设置样式,你给每一列设置class-name从而设置样式的话,可能

前端自动分环境打包(vue和ant design)

现实中的问题:有时候版本上线的时候,打包时忘记切换环境,将测试包推上正式服务器,那你就会被批了. 期望:在写打包的命令行的时候就觉得自己在打包正式版本,避免推包时候的,不确信自己的包是否正确. 既然有了期望,那么就要开始百度如何去实现呢. 下面先开始介绍ant design的方法: ant design的打包工具是roadhog,那么从roadhog下手. 在roadhog文档中,发现define的配置可以传递给代码. 在ant design pro的issue中搜索中,发现环境变量的配置. 我

自写一个漂亮的ant design form提交标签

在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: 1 import React,{Fragment} from 'react'; 2 import { Tag,Icon,Input } from 'antd'; 3 export interface TagDataType{ 4 data:string, 5 color:string, 6 key:string 7 } 8 export interface P