antd-restful

基于 React + Antd Design 组件，扩展组件支持配置即可支持远程获取restful接口的数据。对接远程接口根据restful标准化、降低使用成本，也可以用于动态表单中的JSON配置。

可查看版本变更记录ChangeLog

一. 安装

npm install antd-restful

还需要安装库自身的依赖：

npm install react react-dom antd @ant-design/icons axios

使用示例：

import antdRestful from "antd-restful";

const {
  GridForm, RestTable,
  formitems: { RestSelect, RestTable },
  constants: { FieldType },
  typeTools: { isEmpty },
} = antdRestful;

二. 使用(Usage)

需要注意的是： 组件中远程请求，内部关于 query 序列化的处理，使用的是 query-string 库，设置了 { arrayFormat: "comma", skipNull: true, skipEmptyString: true } 等参数。

若是需要调整，可以在入口中修改：

import antdRestful from "antd-restful";

const { setGlobalConfig } = antdRestful;
// 修改成自己需要的处理方式
setGlobalConfig({
    queryStringify: (params) => Qs.stringify(params, {arrayFormat: 'brackets'}),
    queryParse: (string) => Qs.parse(string, {arrayFormat: 'brackets'}),
})

• 通用组件
  • RestTable
  • GridForm
  • LongText
  • CopyView
  • RouteBaseTable
• 表单项(formitems)
  • RestSelect
  • DateStrPicker
  • RangeStrPicker
  • ExpansionView
  • NumberRange
  • TableSelect
  • UploadView
  • CompareEdit
  • RestAutoComplete
  • RestCascader
  • RestTreeSelect
  • MentionView
• hooks
• typeTools

三、应用场景

• 依赖restful接口的列表数据展示
• 动态表单中的应用