? ? ? ? 項目用的都是antd組件，這里的userList組件展示的表單組件的數據直接get請求拿過來展示的，這里隨機生成了50個用戶只是為了展示表單的api設置。首先就是表單展示需要兩個參數current和pageSize兩個屬性控制表單的最大分頁和當前頁面。那么我們就設置初始值然后通過訪問服務器返回來一些數據，這里我們不用服務器返回的，只是用自己設置的一些數據去展示效果，還有onChange自帶的api監聽page和pageSize去獲取變化后的然后更新就好了，.直接上代碼。
1.userList動態展示
? ? ? ? 效果圖
import React, { useState, useEffect, useRef } from 'react'
import type { PageParams, User } from '@/types/api'
import type { TableColumnsType } from 'antd'
import { Button, Table, Form, Input, Select, Space } from 'antd'
import api from '@/api/index'
import { toLocalDate } from '@/utils'
import CreateUser from './CreateUser'
import type { IAction } from '@/types/modal'
export default function UserList() {const userRef = useRef<{open: (type: IAction, data?: User.UserItem) => void | undefined}>(null)//獲取表單對象 用里面的方法 getFieldsValue獲取表單中填寫的內容const [form] = Form.useForm()const [data, setData] = useState<User.UserItem[]>([])const [total, setTotal] = useState(0)const [pagination, setPagination] = useState({current: 1,pageSize: 10})// 獲取用戶列表const getUserList = async (params: PageParams) => {const values = form.getFieldsValue()const data = await api.getUserList({...values,pageNum: params.pageNum,pageSize: params.pageSize})const list = Array.from({ length: 51 }).fill({}).map((item: any) => {item = { ...data.list[0] }item.userId = Math.random()return item})setData(list) // 注意：接口返回結構要和這里匹配setTotal(list.length)setPagination({current: params.pageNum,pageSize: params.pageSize})}//創建const handleCreate = () => {userRef.current?.open('create')}//搜索const handleSearch = () => {getUserList({pageNum: 1,pageSize: pagination.pageSize})}//重置 表單const handleReset = () => {form.resetFields()}// 組件掛載時調用useEffect(() => {getUserList({pageNum: pagination.current,pageSize: pagination.pageSize})}, [pagination.current, pagination.pageSize])const columns: TableColumnsType<User.UserItem> = [{title: '用戶ID',dataIndex: 'userId',key: 'userId'},{title: '用戶名稱',dataIndex: 'userName',key: 'userName'},{title: '用戶郵箱',dataIndex: 'userEmail',key: 'userEmail'},{title: '用戶角色',dataIndex: 'role',key: 'role',render(role: number) {return {0: '超級管理員',1: '管理員',2: '體驗管理員',3: '普通用戶'}[role]}},{title: '用戶狀態',dataIndex: 'state',key: 'state',render(state: number) {return {1: '在職',2: '離職',3: '試用期'}[state]}},{title: '注冊時間',dataIndex: 'create', // 你的字段是 create，不是 createTimekey: 'create',render(createTime: string) {return toLocalDate(createTime)}},{title: '操作',key: 'action',render(_, record) {return (<Space><Button type='text'>編輯</Button><Button type='text' danger>刪除</Button></Space>)}}]return (<div className='user-list'><Formform={form}className='search-form'layout='inline'initialValues={{ state: 0 }}><Form.Item name='userId' label='用戶ID'><Input placeholder='請輸入用戶ID' /></Form.Item><Form.Item name='userName' label='用戶名稱'><Input placeholder='請輸入用戶名稱' /></Form.Item><Form.Item name='state' label='狀態'><Select style={{ width: 120 }}><Select.Option value={0}>所有</Select.Option><Select.Option value={1}>在職</Select.Option><Select.Option value={2}>試用</Select.Option><Select.Option value={3}>離職</Select.Option></Select></Form.Item><Form.Item><Space><Button onClick={handleSearch} type='primary' className='mr10'>搜索</Button><Button onClick={handleReset} type='default'>重置</Button></Space></Form.Item></Form><div className='base-table'><div className='header-wrapper'><div className='title'>用戶列表</div><div className='action'><Button type='primary' onClick={handleCreate}>新增</Button><Button type='primary' danger>批量刪除</Button></div></div><TablerowKey='userId' // 保證每行有唯一 keypagination={{position: ['bottomRight'],current: pagination.current,pageSize: pagination.pageSize,total: total,showQuickJumper: true,showSizeChanger: true,showTotal: function (total) {return 總共：${total}條},onChange: (page, pageSize) => {setPagination({current: page,pageSize: pageSize})}}}borderedrowSelection={{ type: 'checkbox' }}dataSource={data}columns={columns}/></div><CreateUsermRef={userRef}updata={() => {getUserList({pageNum: 1,pageSize: 10})}}/></div>)
}2.創建表單以及上傳頭像功能（點擊新增彈出取消關閉以及發送成功關閉）
? ? ? ? 效果圖
????????
? ? ? ?靜態的展示就不說了，用戶頭像我們在上傳之前，
????????
? ? ? ? ? ? ? ? 無非就是上傳之后服務器發送回來url然后去替換展示，然后三元表達式就實現了。主要是怎么可以實現點擊新增跳出來子組件也就是創建表單。
? ? ? ? 首先我們可以設置子組件默認不展示的,也就是open我們設置為關閉，我們希望父組件可以操作子組件的屬性，而且我們還希望添加成功后立馬重新加載獲取新列表，那么我們就給子組件傳遞參數，一個我們設置的ref扔過去，以及一個更新方法。
? ? ? ? 然后子組件mRef綁定父組件設置的ref那么就拿到了子組件的DOM元素了，但是方法還是拿不到，也就是我們沒辦法去操作子組件設置的vibale狀態去控制子組件的展示和關閉，那么子組件用useImperativehandle暴露一個open方法，然后open方法可以接收一個類型，因為這個表單我們要在增加更新都需要用到，然后更新vision，這樣就實現了完整了邏輯。上代碼。
import React, { useState, useEffect, useRef } from 'react'
import type { PageParams, User } from '@/types/api'
import type { TableColumnsType } from 'antd'
import { Button, Table, Form, Input, Select, Space } from 'antd'
import api from '@/api/index'
import { toLocalDate } from '@/utils'
import CreateUser from './CreateUser'
import type { IAction } from '@/types/modal'
export default function UserList() {const userRef = useRef<{open: (type: IAction, data?: User.UserItem) => void | undefined}>(null)//獲取表單對象 用里面的方法 getFieldsValue獲取表單中填寫的內容const [form] = Form.useForm()const [data, setData] = useState<User.UserItem[]>([])const [total, setTotal] = useState(0)const [pagination, setPagination] = useState({current: 1,pageSize: 10})// 獲取用戶列表const getUserList = async (params: PageParams) => {const values = form.getFieldsValue()const data = await api.getUserList({...values,pageNum: params.pageNum,pageSize: params.pageSize})const list = Array.from({ length: 51 }).fill({}).map((item: any) => {item = { ...data.list[0] }item.userId = Math.random()return item})setData(list) // 注意：接口返回結構要和這里匹配setTotal(list.length)setPagination({current: params.pageNum,pageSize: params.pageSize})}//創建const handleCreate = () => {userRef.current?.open('create')}//搜索const handleSearch = () => {getUserList({pageNum: 1,pageSize: pagination.pageSize})}//重置 表單const handleReset = () => {form.resetFields()}// 組件掛載時調用useEffect(() => {getUserList({pageNum: pagination.current,pageSize: pagination.pageSize})}, [pagination.current, pagination.pageSize])const columns: TableColumnsType<User.UserItem> = [{title: '用戶ID',dataIndex: 'userId',key: 'userId'},{title: '用戶名稱',dataIndex: 'userName',key: 'userName'},{title: '用戶郵箱',dataIndex: 'userEmail',key: 'userEmail'},{title: '用戶角色',dataIndex: 'role',key: 'role',render(role: number) {return {0: '超級管理員',1: '管理員',2: '體驗管理員',3: '普通用戶'}[role]}},{title: '用戶狀態',dataIndex: 'state',key: 'state',render(state: number) {return {1: '在職',2: '離職',3: '試用期'}[state]}},{title: '注冊時間',dataIndex: 'create', // 你的字段是 create，不是 createTimekey: 'create',render(createTime: string) {return toLocalDate(createTime)}},{title: '操作',key: 'action',render(_, record) {return (<Space><Button type='text'>編輯</Button><Button type='text' danger>刪除</Button></Space>)}}]return (<div className='user-list'><Formform={form}className='search-form'layout='inline'initialValues={{ state: 0 }}><Form.Item name='userId' label='用戶ID'><Input placeholder='請輸入用戶ID' /></Form.Item><Form.Item name='userName' label='用戶名稱'><Input placeholder='請輸入用戶名稱' /></Form.Item><Form.Item name='state' label='狀態'><Select style={{ width: 120 }}><Select.Option value={0}>所有</Select.Option><Select.Option value={1}>在職</Select.Option><Select.Option value={2}>試用</Select.Option><Select.Option value={3}>離職</Select.Option></Select></Form.Item><Form.Item><Space><Button onClick={handleSearch} type='primary' className='mr10'>搜索</Button><Button onClick={handleReset} type='default'>重置</Button></Space></Form.Item></Form><div className='base-table'><div className='header-wrapper'><div className='title'>用戶列表</div><div className='action'><Button type='primary' onClick={handleCreate}>新增</Button><Button type='primary' danger>批量刪除</Button></div></div><TablerowKey='userId' // 保證每行有唯一 keypagination={{position: ['bottomRight'],current: pagination.current,pageSize: pagination.pageSize,total: total,showQuickJumper: true,showSizeChanger: true,showTotal: function (total) {return 總共：${total}條},onChange: (page, pageSize) => {setPagination({current: page,pageSize: pageSize})}}}borderedrowSelection={{ type: 'checkbox' }}dataSource={data}columns={columns}/></div><CreateUsermRef={userRef}updata={() => {getUserList({pageNum: 1,pageSize: 10})}}/></div>)
}
![P1044 [NOIP 2003 普及組] 棧](http://pic.xiahunao.cn/P1044 [NOIP 2003 普及組] 棧)
