后台管理

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: "d*1",
                    width: 160
                },
                {
                    label: "面试答辩(实训二)",
                    prop: "d*2",
                    width: 160
                },
                {
                    label: "毕业答辩(实训三)",
                    prop: "d*3",
                    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;