1. 列表展示?

<Table columns={columns} dataSource={data} rowKey={(record)=>record.admin_no} pagination={false} />

columns 列的定義，dataSource 顯示的數(shù)據(jù) ， rowKey 給Table的每行給唯一的key值

pageinition = {false} 將表格Table 自帶的分頁(yè)取消

2. 分頁(yè)顯示

<Pagination

? ? ? ? ?current={currentPage}

? ? ? ? ?pageSize={pageSize}

? ? ? ? ?total={total}

? ? ? ? ?onChange={handleChangePage}

? ? ? ? ? />;

current 綁定當(dāng)前頁(yè)

pageSize 綁定每頁(yè)條數(shù)

total 綁定總行數(shù)

onChange 改變當(dāng)前頁(yè)面，執(zhí)行的方法

3. 刪除數(shù)據(jù)

設(shè)置columns時(shí)，給刪除按鈕，添加事件,將傳遞當(dāng)前行的id

注： render函數(shù) ，第二個(gè)參數(shù)record，即為當(dāng)行的數(shù)據(jù)

4. 添加數(shù)據(jù)

?const [form] = Form.useForm();

?使用useForm來(lái)操作數(shù)據(jù)??， form.resetFields() 重置數(shù)據(jù)

將Form 與 useForm 綁定

注： 使用了Form.Item 就不能使用defaultValue來(lái)初始數(shù)據(jù)，需要使用Form上的initialValues來(lái)初始數(shù)據(jù)?

表單中，具體的項(xiàng)Form.Item：

注：Form.Item中的name值， 是表單提交時(shí)，傳入對(duì)象的鍵名，為當(dāng)前表單項(xiàng)輸入的值

5. 修改數(shù)據(jù)

使用useForm 與 Form 關(guān)聯(lián)

加載組件時(shí)，使用form.setFieldsValue 顯示對(duì)應(yīng)的值

保存數(shù)據(jù)，直接提交表單，通過(guò)onFinish的參數(shù)，直接獲取表單的輸入

注： 一定要使用Form.Item將表單元素包裹起來(lái)，且指定name屬性

茍有恒 ,?何必三更眠五更起

關(guān)注我，一起學(xué)習(xí)吧?