ant design-Table中的分页实现（包括点击跳页，输入跳页，以及指定每页项目数）

通过这个，对组件的之间的套用，多了一些了解。不再是单纯的，复制提供的组件代码，而是通过属性赋值，将多个组件功能同时实现。
1.实现原理：主要应用的还是Table，通过对Table属性pagination的设置，实现指定功能。
2.逻辑：定义pagination键值对，初始化相关属性，可以在state中定义，也可以直接定义。
需要注意的是，在state中定义时，需要在state外单独定义，current对应的变量，因为state设置变量有延迟，可能没法及时赋值实现跳页。（最好有个小模拟，观察在state内外的区别）

//state外定义cur表示当前显示页面
var cur=1;

//state内定义pagination的属性值
indexTable:{pagination:{//每页3条项目pageSize:3,//自定义每页显示数目showSizeChanger:true,onShowSizeChange:(current, pageSize)=> {console.log(current, pageSize);},//自定义每页显示项目的选项pageSizeOptions:['3','6','9'],// 输入指定页码跳页showQuickJumper:true,onShowQuickJump:(page)=>{// console.log('page:'+page+'   cur:'+cur);cur=page;// console.log(cur);},//全部项目数（最好可以用变量表示，与实际项目数关联）total: 100,// 点击跳页onChange:(page)=>{// console.log('page:'+page+'   cur:'+cur);cur=page;// console.log(cur);}}
}

3.布局：current没定义在pagination键值对中，故要另外赋值，同时顺序有要求，先赋值current，再赋值键值对

<Table
pagination={{current:cur}
pagination={state.indexTable.pagination}/>

4.效果：

参考链接：https://blog.csdn.net/qq_41140741/article/details/87907288

？？？？：
布局中,pagination={{current:cur}不设也没关系？

ant design-Table中的分页实现（包括点击跳页，输入跳页，以及指定每页项目数）相关推荐

React开发（182）:ant design table中带线框的列表
ReactDOM.render(<Tablecolumns={columns}dataSource={data}borderedtitle={() => 'Header'}footer={ ...
Ant Design Table修改滚动条样式
Ant Design Table修改滚动条样式目录一.目的二.步骤 1.了解滚动条的组成部分 2.样式修改 3.实现效果二.总结目录一.目的修改Ant表格的固定列滚动而产生的滚动条样式, ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
ant design table column 设置width不生效解决方案
ant design table column 设置width不生效解决方案参考文章: (1)ant design table column 设置width不生效解决方案 (2)https://ww ...
Ant Design Table columns 参数配置隐藏列方法
Ant Design Table columns 参数配置隐藏列方法 const columns = [{title: '姓名',dataIndex: 'name',key: 'name',// 隐藏 ...
react-hooks+Ant Design Mobile中的自定义表单验证
Ant Design Mobile中的表单校验将validator放在 rules 对象中 <Form.Itemname='uName'label='姓名'requiredrules={[{r ...
Ant Design table实现表头列宽拖拉官方 vue-draggable-resizable的魔改版
Ant Design table实现表头拖拽官方 vue-draggable-resizable的魔改版这里顺便也说一下使用官方vue-draggable-resizable组件,可能也有人不喜欢 ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...

ant design-Table中的分页实现（包括点击跳页，输入跳页，以及指定每页项目数）

ant design-Table中的分页实现（包括点击跳页，输入跳页，以及指定每页项目数）相关推荐

最新文章

热门文章