表单组件

表单组件使用 TDesign Form 与 Refine 的 useTable 二次封装，支持 TDesign 组件参数，同时通过 hook 对组件进行扩展，以支持 Refine 数据请求。使用方法如下：

引入组件

import { Form } from '@duxweb/dux-refine'

基础示例

表单提交的的 url 会根据当前页面所绑定的资源接口进行提交，当然也可以自行配置。在子组件中，你可以使用 TDesign 的表单元素。

import { Form as DuxForm } from '@duxweb/dux-refine'
import { Form, Input } from 'tdesign-react';

<DuxForm>
  <Form.Item
    initialValue="Dux Refine"
    label="标题"
    name="title"
  >
    <Input />
  </Form.Item>
  {/* 其他表单项 */}
</DuxForm>

组件参数

childrenReact.ReactNode
undefined
表单的子元素，如果只需要进行布局，使用 Form.Item 就足够了。
resourcestring
undefined
资源名，用于绑定数据资源，默认会获取当前路由绑定的资源。
action"create" | "edit" | "clone"
create
表单的动作，用于创建、编辑或复制数据。
idstring | number
undefined
表单的主键 id，编辑或复制数据时需要此 id 来查询表单数据。
params[k: string]: any
undefined
查询参数，用于在获取表单数据时传递附加的 GET 参数给 API。
initDataRecord<string, any>
undefined
表单的初始化数据，该参数的优先级高于编辑时自动获取的表单内容。
initFormat(data: Record<string, any>) => Record<string, any>
undefined
初始化数据格式化回调，获取到表单数据时，会调用这个回调函数来对组件的数据进行处理。
saveFormat(data: Record<string, any>) => Record<string, any>
undefined
数据保存格式化回调，在表单提交时使用这个回调来格式化数据。
onSubmit(e: SubmitContext) => void
undefined
提交回调，在表单提交后触发这个回调函数。
useFormPropsuseFormProps
undefined
表单钩子的参数透传，这个参数是 useForm 的封装函数，请参考该文档的参数定义。
import type { FormProps } from 'tdesign-react/esm'
formPropsFormProps
undefined
TDesign 表单参数，请参考 TDesign Form 的文档。
onData(form: UseFormReturnType) => void
undefined
数据回调，当表单数据发生变化时，你可以通过这个回调使用 useForm 返回的方法。
页面表格
模态表单