本人小白一名，第一次學習react ,該資料為本人原創，採用的是react+ant design的Tabled的一個小demo,暫時只實現了增加，刪除單行，多行刪除有Bug,檢視詳情，嘔心瀝血耗時一週完成，禁止抄襲，轉載請先留言，

1、main.jsx

import React from 'react';
import ReactDom from 'react-dom';
import ExampleTable from './ExampleTable.jsx'

ReactDom.render(
    <ExampleTable/>,
    document.getElementById('AppRoot')
);

 

2、ExampleTable.jsx, 注：記住引入antd.css， 否則Table元件無法正常顯示。

import React from 'react';
import { Table,Button,Input,Icon,Popconfirm,Alert } from 'antd';
import AddUser from './AddUser.jsx'
import UserDetails from './UserDetails.jsx'

class ExampleTable extends React.Component {
    constructor(props) {//   建構函式
        super(props);
        this.state = {
            dataSource:[
                { key: 1, nid:1, name: 'tab', gender:'男' , age: 22, schoolname: '第一中學', description: '熱愛班級活動，尊敬老師'},
                { key: 2, nid:2, name: 'shift', gender:'男' , age: 22, schoolname: '第一中學', description: '熱愛班級活動，尊敬老師'},
                { key: 6, nid:6, name: 'ctrl', gender:'男' , age: 22, schoolname: '第一中學', description: '熱愛班級活動，尊敬老師'},
                { key: 4, nid:4, name: 'caps lock', gender:'男' , age: 22, schoolname: '第一中學', description: '熱愛班級活動，尊敬老師'},
                { key: 5, nid:5, name: 'enter', gender:'女' , age: 22, schoolname: '第一中學', description: '熱愛班級活動，尊敬老師'}
            ],
            index : '',
            PersonCount :0,
            selectedRowKeys:[],
            selectedRows:[],
            record : 'abc'
        };
        this.onDelete = this.onDelete.bind(this);//繫結this,宣告該方法需要繫結this, 直接在onClick中呼叫
        this.appendPerson = this.appendPerson.bind(this);
        this.handleSelectedDelete = this.handleSelectedDelete.bind(this);
       this.columns = [
            { title: '編號', dataIndex: 'nid', key: 'nid' ,width:'8%'},
            { title: '姓名', dataIndex: 'name', key: 'name' ,width:'15%'},
            { title: '性別', dataIndex: 'gender', key: 'gender' ,width:'10%'},
            { title: '年齡', dataIndex: 'age', key: 'age',width:'15%', },//render: (text, record, index) => (Math.floor(record.age/10))*10+"多歲"},
            { title: '學校', dataIndex: 'schoolname', key: 'schoolname',width:'15%' },
            { title: '在校表現', dataIndex: 'description', key: 'description' ,width:'20%'},
            { title: '操作', dataIndex: '', key: 'operation', width:'32%',render: (text,record,index)=>(
                <span>
                     <Popconfirm title="刪除不可恢復，你確定要刪除嗎?" >
                                <a title="使用者刪除"  className="mgl10"onClick={this.onDelete.bind(this,index)}>
                                    <Icon type="delete"/></a>
                     </Popconfirm>
                    <span className="ant-divider"/>
                    <UserDetails className="user_details"  pass={record}/>
                </span>
            ) },
        ];
        }

    appendPerson(event){//得到子元素傳過來的值
        let array = [];
        let count = 0;
        this.state.dataSource.forEach(function (element) {
            Object.keys(element).some(function (key) {
                if (key === 'nid') {
                    count++;
                    array[count] = element.nid
                }
            })
        })
        let sortData =array.sort();//對遍歷得到的陣列進行排序
        let MaxData = sortData[(this.state.dataSource.length)-1]//取最後一位下標的值
        event.key=MaxData+1;
        event.nid = MaxData+1;
        this.setState({
              dataSource:[...this.state.dataSource,event]
          })

    }

    onDelete(index){
            console.log(index)
            const dataSource = [...this.state.dataSource];
            dataSource.splice(index, 1);//index為獲取的索引，後面的 1 是刪除幾行
            this.setState({ dataSource });
    }

    handleSelectedDelete(){
        if(this.state.selectedRowKeys.length>0){
            console.log(...this.state.selectedRowKeys)
            const dataSource = [...this.state.dataSource]
            dataSource.splice(this.state.selectedRows,this.state.selectedRows.length)
            this.setState({ dataSource });
        }
        else{

        }
    }

    render() {
        //聯動選擇框
       const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({//將選中的id和物件存入state
                        selectedRowKeys:selectedRowKeys,
                        selectedRows:selectedRows
                })
                console.log(selectedRows,selectedRowKeys)
            },
            onSelect: (record, selected, selectedRows) => {
                //console.log( record, ` selected :${selected}`,`selectedRows:${selectedRows}`);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                //console.log(selected, selectedRows, changeRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User',    // Column configuration not to be checked
            }),
        }
        return (
            <div className="div_body">
              <div id="div_left"></div>
              <div id="div-right">
                  <div className="table_oftop">
                      <Button type="primary" icon="search" style={{float:"right",marginLeft:10}}>查詢</Button>
                      <Input placeholder="input search text" style ={{width:300,float:"right"}}/>
                      <div id="add_delete">
                      <Button type="primary" className="selectedDelete" onClick={this.handleSelectedDelete}>刪除所選</Button>
                      <AddUser className="add_user_btn" callback={this.appendPerson}/>
                      </div>
                  </div>
                <Table columns={this.columns}
                       dataSource={this.state.dataSource}
                       className="table"
                       rowSelection={rowSelection}
                       scroll ={{y:400}}/>

            </div>
            </div>
        );
    }
}
module.exports = ExampleTable;
 

3、AddUser.jsx

import React from 'react';
import {Form,Input,Button,Select,Modal} from 'antd'
const FormItem = Form.Item;
const Option = Select.Option;

class  AddUser extends React.Component{//在es6中定義一個AddUser類
     constructor(props){//建構函式
         super(props);
         this.state = {
             visible:false
         };
         this.handleAdd = this.handleAdd.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleOk = this.handleOk.bind(this)
         this.handleClear = this.handleClear.bind(this)
     }
    handleAdd() {
        this.setState({
            visible: true
        });
    }
    handleSubmit(e){//提交表單
        e.preventDefault();
         this.props.form.validateFieldsAndScroll((err,values)=>{
             if(!err){
                 //console.log('接收的值：',values);
                 this.setState({
                     visible:false
                 })
                 this.props.form.resetFields();//清空提交的表單
                 //當值傳遞到父元素後，通過回撥函式觸發appendPerson方法將引數values帶到父元素
                 this.props.callback(values);
             }
         })
    }

    handleClear(){
        this.props.form.resetFields();
    }

    handleOk() {
        this.setState({
            visible: false
            });
    }
    render(){

     const {getFieldDecorator} = this.props.form;
     const formItemLayout = {
         labelCol:{span : 6},
         wrapperCol:{span: 14}
     };
     const tailFormItemLayout = {
         wrapperCol: {
             span: 14,
             offset: 8
         }
     };
        return(
            <div>
                <Button type="primary" onClick={this.handleAdd}>新增使用者</Button>
            <Modal title="新建使用者" visible={this.state.visible} onCancel={this.handleOk} onOk={this.handleOk}>
                <Form onSubmit={this.handleSubmit}>
                    <FormItem {...formItemLayout} label = "使用者名稱"  hasFeedback>
                        {getFieldDecorator('name', {
                            rules:[{
                                required:true,message:'請輸入您的 name！'
                            }]
                        })(
                            <Input placeholder="請輸入您的使用者名稱！"/>
                        )}
                        </FormItem>
                    <FormItem {...formItemLayout} label="性別" hasFeedback>
                        {getFieldDecorator('gender',{
                            rules:[{
                                required:true,message:'請輸入您的 gender！'
                            }]
                        })(
                            <Select placeholder="請選擇您的性別">
                                <Option value="男">男</Option>
                                <Option value="女">女</Option>
                            </Select>
                )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="年齡" hasFeedback>
                        {getFieldDecorator('age',{
                            rules:[{required:true,message:'請選擇您的 Age'
                            }]
                        })(
                            <Select placeholder="請選擇你您的年齡">
                                    <Option value="26">26</Option>
                                    <Option value="27">27</Option>
                                    <Option value="28">28</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="就讀學校" hasFeedback>
                        {getFieldDecorator('schoolname',{
                            rules:[{required:true,message:'請輸入您的就讀學校'}]
                        })(
                            <Input placeholder="請輸入您的就讀學校！"/>
                        )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="在校表現" hasFeedback>
                        {getFieldDecorator('description',{
                            rules:[{required:true,message:'請輸入您的在校表現'}]
                        })(
                            <Input type="textarea" rows={3} placeholder="請輸入您的在校表現!"/>
                        )}
                    </FormItem>
                    <FormItem {...tailFormItemLayout} style={{padding:10}}>
                        <Button type="primary" htmlType="submit" size="large">提交</Button>
                        <Button type="primary" size="large" onClick={this.handleClear}>重置</Button>
                    </FormItem>
                </Form>
            </Modal>
            </div>
        )
    }
}
AddUser = Form.create()(AddUser); //解決了getFieldDecorator無法定義;

export default AddUser;
 

4、UserDetails.jsx

import React from 'react'
import {Modal,Button} from 'antd'
/*

 */
class  UserDetails extends React.Component{
    constructor(props){
        super(props);
        this.state={
            visible:false
        }
        this.handlePopup = this.handlePopup.bind(this);
        this.handleOkOrCancel = this.handleOkOrCancel.bind(this);
    }
    handlePopup() {
        this.setState({
            visible: true
        });
    }
    handleOkOrCancel(){
        this.setState({
            visible: false
        });
    }

    render(){
        return(
            <div>
                <a onClick={this.handlePopup}>詳情</a>
                <Modal title={this.props.pass.name} visible={this.state.visible}
                       onOk=   {this.handleOkOrCancel} onCancel={this.handleOkOrCancel}>
                    <p>姓名：   {this.props.pass.name}</p>
                    <p>性別：    {this.props.pass.gender}</p>
                    <p>年齡：      {this.props.pass.age}</p>
                    <p>就讀學校：   {this.props.pass.schoolname}</p>
                    <p>在校表現：   {this.props.pass.description}</p>
                </Modal>
            </div>
        )
    }

}

export default UserDetails;

5、ExampleStyle.css

#div-right{
    width:80%;
    height:400px;
    text-Align:center;
    margin: 0 auto;
}
.div_body{
    margin-top: 0.5%;
}
.table_oftop{
    padding: 10px;
}
.selectedDelete{
    float: left;
    margin-left: 35%;
}
.add_user_btn{
    margin-left: auto;
}
.user_details{
    float: right;
}

ant design 官網地址：https://ant.design/components/table-cn/    看不懂的可以參考官方示例。