开源库form-render探索（一）

最新推荐文章于 2024-05-18 11:56:49 发布
最新推荐文章于 2024-05-18 11:56:49 发布
阅读量1.1w 收藏 4
点赞数 2
分类专栏： Web前端 React 编程浅谈
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccaoee/article/details/103210068
版权

引

在2019年10月19号，看到一则新闻：

阿里巴巴可跨组件体系的表单配置生成方案 form-render 开源了：https://github.com/alibaba/form-render

正好这几天一直在研究表单生成器相关内容，遂一探究竟。

正

从GitHub的工程仓库中可看到package.json部分内容如下：

{
   
   "dependencies": {
   

    "moment": "^2.22.2",
    "pope": "^2.0.2",
    "prop-types": "^15.x",
    "rc-color-picker": &
最低0.47元/天 解锁文章
张子虚
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
配置化表单FormRender初尝试
大转转FE
11-03 1307
相信常常做中后台项目的同学都知道，中后台50%的场景和表单有关，并在可灵活配置要求很高，特别是搭建表单配置场景，如果能通过下发JSON配置来生成表单视图的方法，理论上可以提高开发效率。然而，我找到了一个非常好用的 表单 插件,就是通过下发JSON配置来生成表单视图的方法！！！！它就是 FormRender ，一站式中后台 表单解决方案它有什么优点？支持 Ant Design 和 Fusion De...
dynamic-form-render:`dynamic-form-render` 是基于`vue.js` ,`element-ui` 的前端动态表单渲染器，可通过配置文件快速的生成 form 表单
05-27
介绍 dynamic-form-render 是基于vue.js ,element-ui 的前端动态表单渲染器，可通过配置文件快速的生成 form 表单。 安装 npm i dynamic-form-render # or yarn add dynamic-form-render 快速使用 import Vue from 'vue' import dynamicFormRender from 'dynamic-form-render' Vue.use(dynamicFormRender) new Vue({ el: '#app', render: h => h(App) }); 详细文档见
（一）vForm 动态表单设计器之使用
最新发布
刘一线的博客
05-18 1379
VForm是一款基于Vue 2/Vue 3的低代码表单，支持Element UI、iView两种UI库，定位为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能
基于 Vue 3.x 的 Form render
qq_32344993的博客
02-01 4462
github: vue form render 在线演示 简介 我们在写一些常规后台页面的时候，避免不了是需要经常和表单打交道。所以可以想偷懒的小伙伴可能会考虑有没有办法不去做表单工程师?用代码解决重复的人肉工作，没错，我们可以通过 JSON Schema 来描述我们的表单信息，这比重复的写表单控件可方便多了。 但是 JSON Schema 到表单的映射，则是需要我们去关注的，so… 业界有没有比较好的方案呢？答案是肯定的，比如以下几个表单渲染工具： Form Render Formliy … Form.
vue-form-render:基于Vue 3.x，使用JSON模式快速生成自定义表单配置界面
05-06
Vue形式呈现 基于Vue 3.x，使用JSON Schema快速生成自定义表单配置界面。 例子 安装 npm i vue3-form-render --save vue3 form render依赖于从item.so进行渲染，因此在使用vue3 form render我们需要安装Ant Design of Vue并将其导入到我们的项目中： import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue' ; import 'ant-design-vue/dist/antd.css' ; const app = createApp ( App ) ; app . use ( Antd ) ; app . mount ( '#app' ) ; 简易演示 < temp
配个 json，表单就出来了？FormRender 初探。
程序员成长指北
02-13 751
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群相信常常做中后台项目的同学都知道，中后台50%的场景和表单有关，并在可灵活配置要求很高，特别是搭建表单配置场景，如果能通过下发JSON配置来生成表单视图的方法，理论上可以提高开发效率。然而，我找到了一个非常好用的 表单 插件,就是通过下发JSON配置来生成表单视图的方法！！！！它就是 FormRe...
form-render的简单使用心得（FormRender现已升级到 XRende）
weixin_45942049的博客
11-24 7815
偶尔一次使用了form-render表单生成器，使用方便简单，通过简单的Schema就可以生成表单，很符合数据驱动这一理念，基本需求也都能满足。 但是作为新兴的react第三方包，缺点就是互联网上相关资料太少，在使用过程中想要熟悉一些API的使用，相关实例也较少。具体使用事例如下： 简单事例 // 首先写好完整的'数据' "schema": { "type": "object", "properties": { "string": { ...
前端开源库-pure-render-decorator
08-29
前端开源库-pure-render-decorator纯渲染装饰，使反应组件纯。
前端开源库-react-isomorphic-render
08-29
前端开源库-react-isomorphic-renderReact同构渲染，使用React、Redux、React Router和Redux Router进行同构渲染。包括对Webpack的支持
前端开源库-brisky-render
08-29
前端开源库-brisky-render快速渲染，一个用于创建快速用户界面的JS库
前端开源库-v-render
08-30
前端开源库-v-renderv-render，一个web框架是基于组件的nodejs应用程序。
Vue数据驱动表单渲染,轻松搞定form表单|angluo-javascript-266203.pdf
10-16
主要介绍了Vue数据驱动表单渲染,轻松搞定form表单,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
配置可视化-基于form-render的无代码配置服务（一）
Qlly
02-14 620
有些业务场景需要产品或运营去配置JSON数据提供给开发去使用（后面有实际业务场景的说明），原有的业务流程，非开发人员（后面直接以产品指代）把数据交给开发，再由开发去更新JSON数据。对于产品来说，直接接触JSON数据并不友好，一是搞不懂JSON；二是容易出错，影响现网数据。
FormRender使用场景及原理简介
zhichaosong的博客
08-03 4409
schema 以国际标准的 JSON schema为基础，同时能够方便使用任何 antd 的 props通过bind字段，允许数据的双向绑定使用{{...}}书写表达式来完成简单的联动
Vue render渲染函数
qq_37635012的博客
08-23 1317
在使用render函数中，会使用到一个参数createElement，而这个createElement参数，本质上，也是一个函数，是vue中构建虚拟dom所使用的工具。render的性能较高，template性能较低。官网的这里示例中，使用组件，将相同的内容通过solt放进h1-h6的标签中，在使用传统方式时，代码不仅冗长，而且在每一个级别的标题中重复书写了 ，在要插入锚点元素时还要再次重复。这样写在按钮少的时候没有问题，但是一旦按钮数量变多，这样写就会显得特别冗长，在这个时候，就需要render函数。
formrender 适用于react+antd的表单
weixin_43294560的博客
07-15 1908
1、下载 npm i form-render --save FormRender依赖ant design,单独使用不要忘记同时安装antd 2、使用 (1)配置schema条件 const schema = { type: 'object', properties: { input1: { title: '简单输入框', type: 'string', required: true, },
iview表单render使用
weixin_33953384的博客
04-28 990
使用： <Table border ref="selection" :columns="columns" :data="listData" :loading="false"></Table> 复制代码设置： columns: [ { type: 'selection', width: 60, align: 'center' ...
el-form-renderer 使用指南
每天都要努力学习哦~~
05-01 1381
el-form-renderer是基于element的表单渲染器，动态渲染，数据驱动el-form-renderer是基于 element-ui 封装的表单渲染器，但不局限于 element-ui 组件。在完整继承了 element 的form表单属性的基础上进行了简单扩展，一些非表单组件或者封装的自定义组件，如图片上传、富文本等也可进行整合，从而用户能够通过使用一段预设的数据渲染出一个完整的表单。的type有限, 默认只能渲染普通的表单项, 假如现在要渲染一个上传组件,type就不够用了, 那怎么办呢?
多款可视化表单、流程开源设计器
main方法
11-25 7751
  随着互联网的快速发展，越来越多的云建站平台快速崛起，不可避免的就是自定义可视化设计，如何不通过开发就能能够简单快速的搭出一个可用的页面就成了大家头痛的问题，但是从零开始开发设计一套可视化设计功能并不是一个简单的事情，还好有很多开源的可视化设计项目/组件可以供我们使用，今天我们就来看看有哪些开源可视化设计项目。 一、FormRender 易用的跨组件体系的表单渲染引擎 - 通过 JSON Schema 快速生成自定义表单配置界面 Github Star 数 1938 ， Github 地址：https:/
v-form-render
09-02
v-form-render是一个基于Vue.js的表单渲染组件库。它提供了一种方便的方式来动态生成表单，并处理表单的输入验证和数据提交。 通过v-form-render，我们可以通过配置文件来生成表单，而不需要手动编写大量的HTML代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值