react分页和搜索(饿了吗组件使用)

Posted 2021-01-01 wzxwzxwzx

export default class UserComponent extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            columns: [
                {
                    type: ‘selection‘
                },
                {
                    label: "ID",
                    prop: "uid",
                    width: 150
                },
                {
                    label: "姓名",
                    prop: "username",
                    width: 160
                },
                {
                    label: "地址",
                    prop: "cellphone"
                }, {
                    label: "操作",
                    width: 120,
                    fixed: ‘right‘,
                    render: (row, column, index)=>{
                        return <span><Button type="text" size="small" onClick={this.deleteRow.bind(this, index)}>移除</Button></span>
                    }
                }


            ],
            data: [],
            list:[],
            lat_page:"",
            username:""


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

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


  render() {
      return (
      <div className="student">
          <input type={"text"}  placeholder={"输入关键字"} onChange={e=>{this.setState({username:e.target.value})}} />
  <button className="btn" onClick={this.selectRow.bind(this)}>搜索</button>
          <Table
      style={{width: ‘80%‘}}
      columns={this.state.columns}
      data={this.state.data}
      border={true}
      height={660}
      onSelectChange={(selection) => { console.log(selection) }}
      onSelectAll={(selection) => { console.log(selection) }}
      />
      <Pagination onCurrentChange={page=>{
          fetch(‘https://a.daxiangclass.com/offer.php/api/v1/user?searchKeyword=&page=‘+page+‘&size=10‘)
              .then(res=>res.json())
              .then(json=>this.setState({data:json.data},()=>{
                  console.log(this.state.data)              }))      }}      layout="prev, pager, next" total={50} small={true}/>      </div>    );  }}