---
title: 操作后 reload 表格
order: 2
---

````jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Button, Message, Pagination} from '@alifd/next';
import {Field, FormButtonGroup, FormItemGrid, Reset, SchemaForm, Submit} from '@uform/next';
import UseFormTableHooks, {ISearchParams} from '@aligov/components-use-form-table-hooks';
import GovTable from '@aligov/components-gov-table';

const dataSource = {
  list: [],

  init() {
    for (let i = 0; i < 55; i++) {
      this.list.push({
        name: `name-${i}`,
        age: Math.round(Math.random() * 50)
      });
    }
  },

  getPageData(current, pageSize) {
    const start = (current - 1) * pageSize;
    const end = start + pageSize;
    const list = this.list.slice(start, end);

    return {
        current,
        pageSize,
        total: this.list.length,
        list,
    }
  },

  remove(count) {
    this.list = this.list.slice(0, this.list.length - count);
  },

  reset() {
    this.list = [];
    this.init();
  }
};
dataSource.init();

const getData = (params) => {
  console.log('查询参数', params);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(dataSource.getPageData(params.current, params.pageSize));
    }, Math.round(Math.random()*1000));
  })
};

function App() {
  const {
    loading,
    data = {},
    formData = {},
    search,
    reload,
    changeTable,
    updateFormData,
    updateTableData,
    updateTableRow,
  } = UseFormTableHooks(getData, {
    initData: {},
  });

  const {list, total, current, pageSize} = data;

  const columns = [{
    title: '姓名',
    dataIndex: 'name'
  }, {
    title: '年龄',
    dataIndex: 'age'
  }];

  const handleDelete1Row = () => {
    dataSource.remove(1);
    reload(1);
  };

  const handleReset = () => {
    dataSource.reset();
    reload();
  };

  return (
    <div>
      <SchemaForm
        labelCol={6}
        wrapperCol={18}
        value={formData}
        onChange={updateFormData}
        onSubmit={search}
      >
        <FormItemGrid cols={[8, 8, 8]}>
          <Field name="name" type="string" title="姓名" />
          <Field name="age" type="string" title="年龄"/>
        </FormItemGrid>
        <FormButtonGroup>
          <Submit>查询</Submit>​<Reset>重置</Reset>​
        </FormButtonGroup>
      </SchemaForm>

      <div style={{ margin: '20px 0' }}>
        <Button onClick={handleReset}>重置数据</Button>
        <Button onClick={handleDelete1Row} style={{ marginLeft: 20 }}>删除一行</Button>
        <Button onClick={reload} style={{ marginLeft: 20 }}>不减少数据的操作</Button>
      </div>

      <GovTable loading={loading} hasBorder={false} dataSource={list} columns={columns}/>

      <Pagination
        onChange={changeTable}
        current={current}
        total={total}
        pageSize={pageSize}
        className={'pagination'}
      />
    </div>
  );
}

ReactDOM.render((
  <App/>
), mountNode);
````