form-render的简单使用心得(FormRender现已升级到 XRende)

本文介绍了form-render表单生成器的使用体验,重点讲解了如何通过Schema描述表单结构、联动机制的新增API,以及在实际项目中的应用案例。由于其资料匮乏,作者分享了学习过程中的挑战与解决方案。
摘要由CSDN通过智能技术生成

偶尔一次使用了form-render表单生成器,使用方便简单,通过简单的Schema就可以生成表单,很符合数据驱动这一理念,基本需求也都能满足。
但是作为新兴的react第三方包,缺点就是互联网上相关资料太少,在使用过程中想要熟悉一些API的使用,相关实例也较少。具体使用事例如下:
简单示例

  // 使用 Ant Design 体系
  import FormRender from "form-render/lib/antd";
  // 首先写好完整的'数据' 
  "schema": {
    "type": "object",
    // (更新后的1.x与0.x写法略有区别)
    "labelWirth": 130,
    "properties": {
      "string": {
        "title": "输入框",
        "type": "string"
      },
      "select": {
        "title": "可选择",
        "type": "string",
        "enum": [
          "a",
          "b",
          "c"
        ],
        "enumNames": [
          "1",
          "2",
          "3"
        ]
      }
    }
  },
  // onChange事件可以动态获取表单状态
  "formData": {
    "string": "",
    "select": "a"
  }
  // '数据'作为属性值拿到FormRender中使用
  <FormRender schema={schema} formData={formData} onChange={setFormData} />

Schema用于描述表单的基本信息、结构和校验,
其中type类型则是表单的类型(表现在UI),支持 string、number、boolean、array、object、range
default是表单的默认值
uiSchema属性来控制表单项的 UI 展示
如:

        'ui:className': 'qttitle' // 添加标题格式
        
        'ui:readonly': true // 禁止改动,只读
        
        'ui:widget': 'switch'  //开关形式
        
        'ui:disabled':'{{rootValue.optionName === true}}'  //  隐藏(一些互斥关系)
"schema": {
    "type": "object",
    "properties": {
      "string": {
        "title": "字符串",
        "type": "string",
        "ui:width": "50%"  //此时表单的宽度为50%
      }
   }
}

列举皆为简单控件的实现,因工作原因互斥关系等操作不宜展示,因为在实现过程中因为示例较少,理解API需要花费过长时间,如若需要可互相交流
Let yourself gradually excellent

最近又有需求用到formrender了,不得不说更新很快,又增加了些许Api。
表单之间的联动增加了一个watc监听

  const form = useForm();

  const watch = {
    // # 为全局
    '#': val => {
      console.log('表单的时时数据为:', val);
    },
    input1: val => {
      form.setValueByPath('input2', val);
    },
  };

  return <FormRender form={form} schema={schema} watch={watch} />;```

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
v-form-render是一个基于Vue.js的表单渲染组件库。它提供了一种方便的方式来动态生成表单,并处理表单的输入验证和数据提交。 通过v-form-render,我们可以通过配置文件来生成表单,而不需要手动编写大量的HTML代码。我们可以定义各种类型的表单字段,包括输入框、下拉框、单选框、复选框等等。此外,我们还可以指定每个字段的验证规则,以确保用户输入的数据的有效性。 v-form-render支持异步加载选项数据,可以根据需要从接口获取选项数据,并将其动态渲染到下拉框等字段中。这样我们就能够在表单中显示动态的选项,并且不需要手动更新选项数据。 在数据验证方面,v-form-render提供了多种验证规则,如必填、最小长度、最大长度等。我们可以根据需要指定每个字段的验证规则,并在用户提交表单时进行验证。如果表单数据不符合规则,v-form-render会自动显示错误信息,并阻止表单的提交。 除了表单的渲染和验证,v-form-render还提供了对表单数据的处理功能。我们可以在提交表单时将数据进行本地处理,或者发送给后端进行处理。v-form-render还可以支持多表单和表单嵌套,使得复杂的表单结构也能够轻松应对。 总之,v-form-render是一个功能强大且灵活的表单渲染组件库,它通过简单的配置和封装,帮助我们快速构建具有表单验证和数据提交功能的表单页面。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值