后台表格管理

import React,{ Component } from ‘react‘;
import ‘../assets/css/App.css‘;
import ‘../assets/css/Myone.css‘;
import ‘element-theme-default‘;

import { Button,Table } from ‘element-react‘;


class Myone extends Component {

    constructor(props) {
        super(props);
        this.state = {
            columns: [
                {
                    type: ‘selection‘
                },{
                    label: "ID",prop: "uid",width: 160
                },{
                    label: "姓名",prop: "nickname",{
                    label: "手机号码",prop: "cellphone",{
                    label: "日期",prop: "times",{
                    label: "操作",fixed: ‘right‘,render: (row,column,index) => {
                        return <span><Button type="text" size="small" onClick={this.deleteRow.bind(this,index)}>移除</Button></span>
                    }
                },index) => {
                        return <span><Button type="text" size="small" onClick={this.selectRow.bind(this,row.uid)}>查看</Button></span>
                    }
                },index) => {
                        return <span><Button type="text" size="small" onClick={this.updateRow.bind(this,row.uid)}>修改</Button></span>
                    }
                }
            ],data: [],list:[],username:[],password:[],phone:[]
        }
    }
    deleteRow(index) {
        const { data } = this.state;
        data.splice(index,1);
        this.setState({
            data: [...data]
        })
    }

    createRow(){
        fetch(‘ http://fxc.glbuys.com/api/admin/users/add?token=79cee06eb8a4e0b489‘,{
            method: ‘post‘,mode:‘cors‘,headers: {
                ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
            },body:"cellphone="+this.state.phone+"&password="+this.state.password+"&nickname="+this.state.username
        }).then(res=>{
            return res.json();
        }).then(json=>{
            console.log(json);
            if(json.code==200){
                window.location.reload()
            }
        })
    }


    selectRow(uid){
        fetch(‘http://fxc.glbuys.com/api/admin/users/details?uid=‘+uid+‘&token=79cee06eb8a4e0b489‘,{
            method:‘get‘
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                this.setState({list:json.data},()=>{
                    console.log(this.state.list.nickname)
                })
            }
        })
    }

    updateRow(uid){
        fetch(‘http://fxc.glbuys.com/api/admin/users/details?uid=‘+uid+‘&token=79cee06eb8a4e0b489‘,{
            method:‘get‘
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                this.setState({
                    name:json.data.nickname,phone:json.data.cellphone,uid:json.data.uid
                })

            }
        })
    }
    updatealt(uid){
        fetch(‘http://fxc.glbuys.com/api/admin/users/mod?token=79cee06eb8a4e0b489‘,{
            method:‘post‘,headers:{
                ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
            },body:"uid="+uid+"&cellphone="+this.state.phone+"&password="+this.state.password+"&nickname="+this.state.username
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                window.location.reload()
            }
        })
    }


    componentDidMount() {
        fetch(‘http://fxc.glbuys.com/api/admin/users/lists?page=1&token=79cee06eb8a4e0b489‘,{
            method: ‘get‘
        }).then((res) => {
            return res.json();
        }).then((json) => {
            if(json.code==200){
                this.setState({data:json.data},()=>{
                    // console.log(this.state.data)
                })
            }
        })

    }



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


          <Table

              columns={this.state.columns}
              data={this.state.data}
              border={true}
              height={250}
              onSelectChange={(selection) => { console.log(selection) }}
              onSelectAll={(selection) => { console.log(selection) }}
          />
            <from>
                昵称：<input type="text" defaultValue={this.state.name} onChange={e=>{this.setState({username:e.target.value})}}/><br/>
                密码：<input type="password" onChange={e=>{this.setState({password:e.target.value})}}/><br/>
                手机号：<input type="text" defaultValue={this.state.phone} onChange={e=>{this.setState({phone:e.target.value})}}/><br/>
                <button type="button" onClick={this.createRow.bind(this)}>注册</button>
                <button type="button" onClick={this.updatealt.bind(this,this.state.uid)}>修改</button>
            </from>




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