【React入门实践】结合Ant-Design 从0带你手把手开发 带【复杂操作】的表格列表以及【Modal弹框】的使用

你生来就值得被爱，这一点无需置疑。 

目录

1. 看页面效果

2. 分析接口文档

（1）冻结、解冻接口

 （2）查看详情接口

 （3）分配角色接口

 （4）创建用户接口

 3. 参照UI编写前端页面

（1）页面整体布局

（2）列表及复杂操作

4. 冻结与解冻功能

5. 新建功能

（1）点击‘创建账号’弹出弹框

（2）点击‘新增’ 调接口实现

6. 查看详情功能

（1）点击查看详出现弹框

（2）显示详情信息

（3）图片展示的处理

---

1. 看页面效果

功能总结：

（1）查询栏的展开收起 【React入门实践】复杂搜索表单的【展开-收起】功能_Sabrina_cc的博客-CSDN博客

（2）页面列表显示数据 【React入门实践】结合Ant-Design 从0带你手把手开发包含【列表】和【搜索栏】的简单【用户管理】页面_Sabrina_cc的博客-CSDN博客

（3）列表对应不同标签显示，以及操作的分情况显示

（3）查看详情 -- 需要通过点击事件传参查询该用户详情信息显示

（4）冻结/解冻账号 --  开关操作

（5）创建账号 -- 弹框新建并校验 新建后刷新列表

2. 分析接口文档

（1）冻结、解冻接口

改接口只需要传入账号相应的id即可，后端实现置反操作。前端只需要处理好显示即可

 （2）查看详情接口

 （3）分配角色接口

 （4）创建用户接口

 

 3. 参照UI编写前端页面

（1）页面整体布局

Search是查询部分；CollectionCreateForm是新建部分弹框；DetailForm是详情弹框部分；RoleForm是角色分配弹框部分；StandardTable是列表部分；

return (
    <PageHeaderLayout title="列表" className={'commonList'}>
      <Search init={init} dispatch={dispatch} />
      {visible && (
        <CollectionCreateForm
          setVisible={setVisible}
          visible={visible}
          dispatch={dispatch}
          init={init}
          toggleForm={toggleForm}
        />
      )}
      {detailVisible && (
        <DetailForm
          setDetVisible={setDetVisible}
          detailVisible={detailVisible}
          dispatch={dispatch}
          init={init}
          userId={userId}
          toggleDetail={toggleDetail}
          detailData={detailData}
        />
      )}
      {roleVisible && (
        <RoleForm
          setRoleVisible={setRoleVisible}
          roleVisible={roleVisible}
          dispatch={dispatch}
          init={init}
          userId={userId}
          userRole={userRole}
          toggleRole={toggleRole}
        />
      )}
      <Card
        style={
  { marginTop: 1 }}
        bordered={false}
        bodyStyle={
  { padding: '