後臺管理

import React, { Component } from 'react';
import '../assets/public.css'
import '../assets/App.css'
import '../assets/chinatwo.css'

import { Button,Icon,Tag,Table,Pagination,Input } from 'element-react';
import 'element-theme-default';

class chinatwo extends Component {
    constructor(props) {
        super(props);

        this.state = {
            columns: [
                {
                    label: "編號",
                    prop: "id",
                    width: 150,
                    fixed: 'left',
                    align: 'center'
                },
                {
                    label: "學生",
                    prop: "username",
                    width: 160,
                    align: 'right'
                },
                {
                    label: "項目答辯(實訓一)",
                    prop: "dabian1",
                    width: 160
                },
                {
                    label: "面試答辯(實訓二)",
                    prop: "dabian2",
                    width: 160
                },
                {
                    label: "畢業答辯(實訓三)",
                    prop: "dabian3",
                    width: 160
                },
                {
                    label: "操作",
                    fixed: 'right',
                    render: (row, column, index)=>{
                        return <span><Button type="text" size="small" onClick={this.deleteRow.bind(this, index)}>移除</Button></span>
                    }
                }
            ],
            data: [],
            username:[]
        }
    }

    deleteRow(index) {
        const { data } = this.state;
        data.splice(index, 1);
        this.setState({
            data: [...data]
        })
    }
    //
  selectRow(){
      console.log(this.state.username)
      fetch('https://a.daxiangclass.com/offer.php/api/v1/user?searchKeyword='+this.state.username+'&page=1&size=10', {
          method: 'get'
      }).then((res) => {
          return res.json();
      }).then((json) => {
          this.setState({data:json.data},()=>{
              // console.log(this.state.data)
          })
      })
  }


    componentDidMount() {

        fetch('https://a.daxiangclass.com/offer.php/api/v1/user?searchKeyword=&page=1&size=10', {
            method: 'get'
        }).then((res) => {
            return res.json();
        }).then((json) => {
            this.setState({data:json.data},()=>{
              // console.log(this.state.data)
            })
        })
    }

  render() {
    return (
      <div className="chinatwo">

        <div className="tabs">
            <Input onBlur={e=>{this.setState({username:e.target.value})}} placeholder="請輸入內容" />

            <Button type="primary" onClick={this.selectRow.bind(this)}>搜索</Button>{this.state.username}
            <Table
                style={{width: '100%'}}
                columns={this.state.columns}
                data={this.state.data}
                border={true}
            />
            <div className="block">
                <Pagination layout="prev, pager, next" total={50} onCurrentChange={page=>{
                  fetch('https://a.daxiangclass.com/offer.php/api/v1/user?searchKeyword=&page='+page+'&size=10',{
                    method:'get'
                  }).then((res)=>{
                    return res.json();
                  }).then((json)=>{
                    this.setState({data:json.data},()=>{

                    })
                  })
                }}/>
            </div>
        </div>

      </div>
    );
  }
}
export default chinatwo;