在antd的table中内嵌分页按钮
Posted webchen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在antd的table中内嵌分页按钮相关的知识，希望对你有一定的参考价值。
内嵌分页按钮的本质是在最后一行添加特别属性的对象。同时合并该行 列。
效果图是这样的：
点击加载更多，即向后台重新获取数据：
antd版本号： 2.9.0
代码及思路：动态创建columns方法中
//创建column
createColumns(datasCol, param ,) {
let that = this,ele,column=[];
let {dreducer, daction,tableDatas,} = this.props;
//表格列是'循环'动态生成的，同时后面还单独添加了'操作'列，所以在这里，不渲染有new属性的列
column = datasCol.map((item, key) => {
let option
option = {
render(text, record, index) {
//如果行对象有new属性，则不渲染
if(record.new){
return {
children: "",
//单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染
props: {colSpan: 0,}
}
}
else{
return <span>{text}</span>
}
}
}
return option;
})
//单独添加操作列
if(datasCol.size>0){
column = column.push({
title: '操作',
...
render(text, record, index) {
//重点，在操作列中合并行
if(record.new){
let datalength=dreducer.get("datalength")
let total=dreducer.get("total")
return {
children: <div style={{display:"", cursor: 'pointer', height: '20px', lineHeight: '20px', textAlign: 'center',
color:"#A0A0A0",fontWeight: '700', fontSize: '14px'}}
//单击以加载数据
onClick={()=>{that.changeDatas(param)}}>
{total===0?"没有数据显示":(datalength===0?"数据加载中...":(datalength<total?"加载更多":"已加载全部数据"))}</div>,
props: {
//重要!合并行
//因为datasCol不包括操作列，所以要加一
colSpan: datasCol.size+1,
}
}
}else
if (xxxxx) {
xxxxxx
}
}
})
}
xxxxx
}
render()中：
//判断时候是最后一行，如果是则选择"加载更多"应有的样式，反之则选择数据行应有的样式
let classname = (record,index) => {
if(index===dataSource.length-1){
return 'loadStyle'
}else{
return 'tableStyle'
}
//获取表格数据的最后一行数据，如果该数据存在且没有new属性，那我们就在最后加一个有new属性的对象，来代表"加载更多"。
let lastData=dataSource[dataSource.length-1]
if(lastData!==undefined&&!('new' in lastData)){
dataSource.push({new:1})
}
<Table
//表格数据
dataSource={dataSource}
//表格列名
columns={columns}
//行的类名
rowClassName={classname}
//单击行事件
onRowClick={(record, index, event) =>{
//如果是最后一行数据即"加载更多"，不执行该事件
if(index!==dataSource.length-1)
this.clickRow(record, index,event,dataSource.length)}}
//双击行事件
onRowDoubleClick={(record, index, event) =>{
//如果是最后一行数据即"加载更多"，不执行该事件
if(index!==dataSource.length)
this.doubleClickRow(record, index, event)}}
/>
}
补充： 1、如果你的组件是复用的，且里面包含table，需要判断在哪些情况下显示'加载更多'，哪些情况下不显示。 2、在table中内嵌加载更多，在'加载更多'行需要禁用 单击、双击行事件。
（完）
以上是关于在antd的table中内嵌分页按钮的主要内容，如果未能解决你的问题，请参考以下文章
React —— antd Table组件 分页Pagination