Remix Antd Admin

Appearance

pro-table ​

三个重要部分 ​

  • toolbar 渲染
    • 导航
    • 创建
  • columns 渲染
    • action
      • 编辑
      • 删除
  • pagnition 渲染
  • reload

以上是渲染的三个重要部分

toolbar ​

在顶部通常为了方便操作，

  • 导航
  • 创建

创建：带有模态框的表单

columns ​

列表的具体内容

  • 列表中不仅仅展示数据，还需要与模态框进行交互表单进行交互

这就使得 columns 变得复杂， 复杂的内容就需要拆分，将小的功能进行拆分

pagnition ​

如果我们不是 request 属性，我们需要自己控制分页。

分页：

  • total
  • pageSize
  • onChange

三个属性是我们需要关注的内容

重新渲染 ​

  • 表格中的内容发生了变化之后需要重新渲染数据。

options.reload 给我们提供了直接的处理方法

数据交互 ​

数据交互是表格重要内容

数据来源 ​

  • 使用 redux-toolkit-query 获取

数据 CRUD ​

  • Create
  • Read
  • Update
  • Delete

create ​

一般在 toolbar 中配合模态框进行 create 操作

Read ​

从接口中读取数据，填充到 columns 中

update ​

一般针对 columns 中数据进行update 数据上与 create 非常相似。

delete ​

删除的方式：

  • columns 单条删除
  • 表个 select 中多条删除

后端接口统一使用 ids 进行删除。