子组件
import {Table} from 'antd';
import svg from '../../../images/rev.png';
import React, { Component } from 'react';
export default class SourceTable extends Component {
node1 = <div>法人股东数量(个)<img onClick={p=>this.numClick(1)} alt="" src={svg} /></div>;
node2 = <div>法人股东投资(万)<img alt="" onClick={p=>this.numClick(2)} src={svg} /></div>;
numClick(k){
this.props.changeRankNum(k);
}
colum = [
{
title: '排名',
dataIndex: 'order',
key: 'order',
render: (text, record, index)=>{
return ((Number(this.props.current) - 1) * 5) + Number(index) + 1; //序号
}
},
{
title: '省份',
dataIndex: 'province',
key: 'province'
},
{
title: this.node1,
dataIndex: 'legalPersonNum',
key: 'legalPersonNum'
},
{
title: this.node2,
dataIndex: 'legalPersonFund',
key: 'legalPersonFund'
}
];
render() {
const {dataSour, onRowtab} = this.props;
return (
<div>
<Table
dataSource={dataSour}
columns={this.colum}
className="fance-lie" // 列类名
pagination={false}
onRowClick={record=> this.props.onRowtab(record)}
rowClassName={ // 隔行变色
function(record, index){
let className = 'light-row';
if (index % 2 === 1) {className = 'dark-row';}
return className;
}
}
/>
</div>
);
}
}
父组件
<SourceTable current={currentPage} onRowtab={this.onRowtabs} dataSour={dataSour} changeRankNum={(k)=>this.changeRankNum(k)} />
//分页
<Pagination
total= {total}
defaultPageSize={5}
current={currentPage}
showQuickJumper={true}
itemRender={(current, type, originalElement)=>this.itemRender(current, type, originalElement)}
onChange={(k)=>this.changePage(k)}
/>
onRowtabs=(k)=>{
//获取点击行信息
this.setState({
provinceMsg: k
});
}
changeRankNum(k){
//按 投资人数量排序
let {allDatalist, recordNum} = this.state;
if(k === 1){
if(recordNum > 0){
this.setState({
allDatalist: [...allDatalist].sort((a, b)=>b.legalPersonNum - a.legalPersonNum),
currentPage: 1,
recordNum: 0
}, ()=>{
this.changePage(1);
});
}else{
this.setState({
allDatalist: [...allDatalist].reverse(),
currentPage: 1,
recordNum: 0
}, ()=>{
this.changePage(1);
});
}
}else if(k === 2){
//按法人股东投资额排序
if(recordNum === 0){
this.setState({
allDatalist: [...allDatalist].sort((a, b)=>b.legalPersonFund - a.legalPersonFund),
currentPage: 1,
recordNum: Number(recordNum) + 1
}, ()=>{
this.changePage(1);
});
}else{
this.setState({
allDatalist: [...allDatalist].reverse(),
currentPage: 1,
recordNum: Number(recordNum) + 1
}, ()=>{
this.changePage(1);
});
}
}
}
//自定义分页文案
itemRender=(current, type, originalElement)=> {
// console.log('current, type, originalElement', current, type, originalElement);
if (type === 'prev') {
return <a>上一页</a>;
}
if (type === 'next') {
return <a>下一页</a>;
}
return originalElement;
}
changePage(k){
console.log('current-page', k);
this.setState({
currentPage: k,
dataSour:this.changeDataSour(this.state.allDatalist, k)
});
}
changeDataSour(allData, page){
let dataSource = [];
dataSource = isArray(allData) ? [...allData].splice(Number(page * 5 ) - 5, 5) : [];
return dataSource;
}
效果图