表格(隔行变色,点击行,给表格头添加节点,自定义分页文案)

子组件


import {Table} from 'antd';
import svg  from '../../../images/rev.png';

import React, { Component } from 'react';

export default class SourceTable extends Component {

    node1 = 
法人股东数量(个)this.numClick(1)} alt="" src={svg} />
; node2 =
法人股东投资(万)this.numClick(2)} src={svg} />
; 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 (
this.props.onRowtab(record)} rowClassName={ // 隔行变色 function(record, index){ let className = 'light-row'; if (index % 2 === 1) {className = 'dark-row';} return className; } } /> ); } }

父组件

  this.changeRankNum(k)}   />   
//分页
 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 上一页;
        }
        if (type === 'next') {
            return 下一页;
        }
        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;
}

效果图

image.png

你可能感兴趣的:(表格(隔行变色,点击行,给表格头添加节点,自定义分页文案))