后台表格管理
程序员文章站
2023-04-07 09:20:10
import React, { Component } from 'react'; import '../assets/css/App.css'; import '../assets/css/Myone.css'; import 'element-theme-default'; import { B... ......
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", width: 160 }, { label: "手机号码", prop: "cellphone", width: 160 }, { label: "日期", prop: "times", width: 160 }, { label: "手机号码", prop: "cellphone", width: 160 }, { label: "操作", fixed: 'right', render: (row, column, index) => { return <span><button type="text" size="small" onclick={this.deleterow.bind(this, index)}>移除</button></span> } }, { label: "操作", fixed: 'right', render: (row, column, index) => { return <span><button type="text" size="small" onclick={this.selectrow.bind(this, row.uid)}>查看</button></span> } }, { label: "操作", fixed: 'right', render: (row, column, 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', mode:'cors', 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;
上一篇: 三妻四妾的感觉
下一篇: 特么今天碰到隔壁妹纸