表单设计器 k-form-design

已于 2023-01-10 23:19:39 修改
阅读量3.2k 收藏 5
点赞数
分类专栏： Web前端 文章标签： vue.js javascript 前端
于 2022-02-26 11:04:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ejinxian/article/details/123146720
版权

        k-form-design支持自定义组件、表单联动等高级功能，使用 vue2 + CompositionAPI + ts 实现伪 vue3 应用。

        设计器布局参考form-generator项目，基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速

来源： 

v-form-antd

formDesigner3基于 vue+ElementUI 的表单设计器

 formDesigner3: formDesigner表单设计器的vue3版本,这个版本，你将会看到更多的改变。O(∩_∩)O哈哈~

ejinxian
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
探索 K-Form-Design：高效前端表单构建利器
gitblog_00019的博客
04-09 588
探索 K-Form-Design：高效前端表单构建利器 k-form-design基于vue Ant-Design 的表单设计器，快速开发项目地址:https://gitcode.com/gh_mirrors/kf/k-form-design 项目简介 是一个强大的前端组件库，专为快速构建可配置、灵活的表单设计而生。它基于 React 框架，提供了丰富的预设组件和强大的表单设计能力，让开发者可以...
KFormDesign的使用
2401_84424519的博客
06-11 234
<template> <div> <k-form-design /> </div> </template>k-form-design文档网络获取数据中不用写完整路径，便于开发与运维
k-form-design:基于vue Ant-Design 的表单设计器，快速开发
05-10
表单设计器 k-form-design 简介 设计器布局参考form-generator项目，基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速 注：该项目不兼容vue3.0项目，暂无后续兼容vue3.0的计划 特性 可视化配置页面 提供栅格、表格等布局 布局嵌套使用 提供预览、保存、生成json、生成可执行代码等操作 支持表单验证 快速获取表单数据 自定义组件插入 自定义主题色 组件 KFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面） KFormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面） 安装 # 使用yarn yarn add k-form-design
k-form-design 基础
2401_84424519的博客
06-11 631
基于kcz66开源的k-form-design的3.6.1分支进行的二次开发。它vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速表单设计器: 表单设计器。
k-form-design 项目教程
gitblog_00470的博客
08-08 886
k-form-design 项目教程 k-form-design基于vue Ant-Design 的表单设计器，快速开发项目地址:https://gitcode.com/gh_mirrors/kf/k-form-design 项目介绍 k-form-design 是一个基于 Vue 和 Ant-Design-Vue 实现的表单设计器。它允许用户通过简单的可视化操作快速设计出表单页面，并生成可保存...
form-design-next:动态表单页面设计-自动生成页面--vue3.0版本
03-31
动态表单页面设计-Vue3.0版本 Vue3 +打字稿+ Element-Plus重构中... 自动生成H5页面，一些简单的页面无需前端参与，运营人员自己新建修改即可 QQ交流群： 扫码加群： 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅
k-form-design表单设计器 v3.8.18.zip
03-25
《k-form-design表单设计器 v3.8.18》是一款强大的前端表单构建工具，专为提升开发效率而设计。这款开源软件允许开发者快速、灵活地创建自定义表单，适应各种业务需求，尤其适合于系统软件工具的构建和建站模板的...
haku-form-design:白箱表单设计器
05-30
haku-form-design白箱表单设计器示例图说明:grinning_face_with_big_eyes: 使用VueCLI4.0+及TypeScript1.7+开发，目前仅对chrome浏览器提供完整支持。安装步骤// 安装npm install// 运行npm run serve// 打包npm run...
vue_form_design:基于Vue3.0的表单设计器
03-16
Vue Form Design是一款基于Vue3.0的表单设计器，它允许开发者通过拖拽方式快速构建动态表单，大大简化了前端开发中的表单设计工作。 在Vue3.0中，核心更新包括Composition API、Suspense、Teleport等。Composition ...
k-form-design表单设计器.rar
07-20
设计器布局参考form-generator项目，基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更...
FormDesign
05-06
是基于FLEX 开发的一款B/S的自定义表单系统 整个过程如下： 1、通过FormDesign自定义表单画出相应的表单； 2、将生成好的XML放到程序中，并通过后台自动编译成JSP； 注：FormDesing只是自定义表单的程序，并没有后台编译成JSP的过程。
form-design：动态表单页面设计-自动生成页面
02-06
动态表单页面设计 自动生成H5页面，一些简单的页面无需前端参与，运营人员自己新建修改即可 QQ交流群： 扫码加群： Vue3版本（Vue3 +打字稿+ Element-Plus）正在重构中... 提示 预览功能需启动form-design-h5项目 参见 。 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint
kcz66-k-form-design-master.zip
04-16
基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速
FormDesigner基于AntDesign和jQueryUI的表单设计器
08-10
Form Designer 基于Ant Design 和 jQuery UI 的表单设计器
ant design vue input change_基于 Vue+Antd 拖放表单构建器KFormDesign
weixin_39783360的博客
11-25 1096
前几天有给大家分享一个Vue可视化设计器。今天继续推荐一款超不错的Vue拖拽表单设计器K-Form-Design。Vue可视化在线制作平台GodsPenk-form-design 基于 vue.js+ant-design 构建的表单设计器。在线快速生成配置表单。支持自定义属性配置、生成JSON及代码。功能特性可视化配置页面提供栅格、表格等布局布局嵌套使用提供预览、保存、生成json、生成可执行代码...
探索高效表单设计：k-form-design 开源项目推荐
最新发布
gitblog_00489的博客
08-08 714
探索高效表单设计：k-form-design 开源项目推荐 k-form-design基于vue Ant-Design 的表单设计器，快速开发项目地址:https://gitcode.com/gh_mirrors/kf/k-form-design 在现代Web开发中，表单是用户与系统交互的重要桥梁。一个高效、易用的表单设计器不仅能提升用户体验，还能显著提高开发效率。今天，我们要介绍的就是这样一个...
form-design OA 工作流表单设计器
04-13
一个工作流表单设计器开源项目form-design。可实现form表单组件的拖动，基于bootstrap,jquery。
elementui 集成 k-form-design
06-10
要在 ElementUI 中集成 k-form-design，可以按照以下步骤进行操作： 1. 安装 k-form-design 组件库 可以使用 npm 或 yarn 安装 k-form-design： ``` npm install k-form-design --save ``` 或 ``` yarn add k-form-design ``` 2. 在 main.js 中注册 k-form-design 在 main.js 中，引入 k-form-design 组件库并注册为全局组件： ```javascript import Vue from 'vue' import KFormDesign from 'k-form-design' import 'k-form-design/lib/k-form-design.css' Vue.use(KFormDesign) ``` 3. 在 ElementUI 中使用 k-form-design 组件 现在，你就可以在 ElementUI 中使用 k-form-design 组件了。例如： ```html <template> <el-form :model="formData" label-width="80px"> <k-form-design :data="formDesignData" /> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: {}, formDesignData: { // 表单设计器数据 } } }, methods: { submitForm() { // 提交表单 } } } </script> ``` 以上就是在 ElementUI 中集成 k-form-design 的步骤，希望能够帮到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值