react AntUI(table组件使用案例)

Posted zhujiasheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react AntUI(table组件使用案例)相关的知识,希望对你有一定的参考价值。

import React from react;
import {connect} from "react-redux"
import {bindActionCreators} from redux;
import request from @src/util/util.js;
import {Table, DatePicker,Layout, Row, Col, Select, Button, Icon, Input} from antd;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const {Header,Content} = Layout;
const {Option} = Select;

function createTableConfig () {
    const columns = [{
        title: 序号,
        dataIndex: no,
      },{
        title: ID,
        dataIndex: uid,
      },
      {
        title: 注册类型,
        dataIndex: type,
      },
      {
        title: 来源,
        dataIndex: isMobile,
      },
      {
        title: 审核状态,
        dataIndex: status,
      },
      {
        title: 昵称,
        dataIndex: username,
    }];

    let table = {
        columns,
        bordered: true,
        pagination: {
            showSizeChanger: true
        }
    }
    return table;
}

class Welcome extends React.Component{
    constructor(props) {
        super(props);

        let searchParm = {
            page:1,
            limit:10,
            registerType:-1,
            filter:0,
            keyword:‘‘,
            verifyStatus:-1,
            startTime:‘‘,
            endTime:‘‘
        }

        let tableData = {
            dataList:{
                list:[],
                totalCount:0
            }
        }

        this.state = {
            ...searchParm,
            ...tableData,
            dateTime:‘‘,
        }
    }

    handleChangeTimeMt(date, dateString) {
       this.setState({
           startTime:dateString[0],
           endTime:dateString[1],
           dateTime:date
       })
    }

    verifyStatusMt (option) {
        this.setState({
            verifyStatus:option
        })
    }

    changeInputValMt (el) {
        this.setState({
            keyword:el.target.value
        })
    }
    
    getTableDataMt (isInitPage) {
        if(!isInitPage){//搜索初始化分页参数
            this.setState({
                page:1,
                limit:10,
            })
        }

        let resolve = () => {
            let parm = /member/list;
            parm += ?page=+this.state.page,
            parm += &limit=+this.state.limit,
            parm += &verifyStatus= +this.state.verifyStatus;
            parm += &registerType= +this.state.registerType;
            parm += &filter= +this.state.filter;
            parm += &keyword= +this.state.keyword;
            parm += &startTime= +this.state.startTime;
            parm += &endTime= +this.state.endTime;

            request.get(parm)
            .then(res => {
                this.setState({
                    dataList: {
                        list:res.data.list,
                        totalCount:res.data.totalCount
                    }
                })
            })
        }

        setTimeout(resolve)
    }

    changeTableData (isShowSize, page, pageSize) {
        this.setState({
            page:page,
            limit:pageSize,
        })
        setTimeout(()=>{
            this.getTableDataMt(true)
        })
    }
    
    clearKeywordsMt () {
        this.setState({
            keyword:‘‘
        })
    }

    componentWillMount(){
        this.getTableDataMt()
    }

    render(){
        let welcomeStyle = {
            position:relative
        }
        let headStyle = {
            padding:0 20px,
            lineHeight:64px
        }
        let contStyle = {
            padding:20px
        }
        let headPointStyle = {
            marginLeft: 20px,
            marginRight: 10px
        }
        let headInputStyle = {
            display: inline-block,
            width: 160px,
            marginRight: 10px
        }

        let tableConfig = createTableConfig.call(this);
            tableConfig.dataSource = this.state.dataList.list;
        let pagination = tableConfig.pagination;
        let {page, limit} = this.state;

        pagination.onChange = this.changeTableData.bind(this, false);
        pagination.onShowSizeChange = this.changeTableData.bind(this, true);
        pagination.total = this.state.dataList.totalCount;
        pagination.current = page;
        pagination.pageSize = limit;
        pagination.showTotal = (total, range) => ("筛选结果:" + total);

        return (
            <div className="welcome" style={welcomeStyle}>
                {/* 搜索区域 */}
                <Content style={headStyle}>
                    <RangePicker onChange={this.handleChangeTimeMt.bind(this)} value={this.state.dateTime}/>
                    <span style={headPointStyle}>审核状态</span>
                    <Select defaultValue={-1}
                        value={this.state.verifyStatus}
                        onSelect={this.verifyStatusMt.bind(this)}>
                        <Option value={-1}>全部</Option>
                        <Option value={1}>待审核</Option>
                        <Option value={2}>已通过</Option>
                        <Option value={3}>已拒绝</Option>
                    </Select>
                    <span style={headPointStyle}>&nbsp;</span>
                    <div style={headInputStyle}>
                        <Input
                            value={this.state.keyword}
                            onInput={this.changeInputValMt.bind(this)}
                            prefix={<Icon type=search/>}
                            suffix={<Icon type=close-circle 
                            onClick={this.clearKeywordsMt.bind(this)}/>}/>
                    </div>
                    <Button onClick={this.getTableDataMt.bind(this,false)}
                            className=btnStyle 
                            style={{marginRight: 10px}}>搜索</Button>
                </Content>
                {/* 列表区域 */}
                <Content style={contStyle}>
                    <Table {...tableConfig} rowKey={record => record.uid}/>
                </Content>
            </div>
        )
    }
}

export default (Welcome)

 

以上是关于react AntUI(table组件使用案例)的主要内容,如果未能解决你的问题,请参考以下文章

React+hoots+antui封装一个带搜索功能的picker

在react中使用到的好用的插件

create-react-app默认配置进行自定义craco

create-react-app默认配置进行自定义craco

react-table 在数据中渲染组件

react简述2:在react中使用antd的table组件