后台管理

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",{
                    label: "毕业答辩(实训三)",prop: "dabian3",{
                    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;