Form Generator扩展Element Tabs标签页组件 (超级详细)

已于 2023-07-13 10:13:52 修改
阅读量1.4k 收藏 7
点赞数 2
分类专栏： form generator扩展组件系列 (超级详细) 文章标签： vue.js javascript 前端 前端框架 开发语言
于 2023-03-06 18:11:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19991931/article/details/129296913
版权
本文详细介绍了如何在form-generator项目中从零开始扩展el-tabs组件，包括配置config.js、修改DraggableItem.vue、RightPanel.vue、html.js、js.js、home.vue以及parser解析器的相关代码。通过这个过程，读者可以了解到form-generator的项目结构和组件扩展方法。
摘要由CSDN通过智能技术生成

一、form-generator是什么？✨ ⭐️ 🌟 

form-generator的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零开始扩展每一个组件。

扩展主要包含Element UI中的卡片、步骤条、table列表、折叠面板、树形控件以及自定义组件等等10余个组件的详细扩展方法。

其中不包含子表单、表格布局。因为这两个组件涉及到的代码量实在很大，没办法写博文。感兴趣的小伙伴可以看看大概的效果

了解本专栏 订阅专栏 解锁全文
Etc.End
关注
专栏目录
订阅专栏
Form Generator 扩展 Element Tabs 标签页组件 编程
TechCraze的博客
09-15 199
Form Generator 扩展 Element Tabs 标签页组件 编程在本文中，我们将探讨如何开发一个 Form Generator 扩展，该扩展将使用 Element Tabs 标签页组件。我们将详细介绍如何使用 Element Tabs 组件创建一个动态的表单生成器，并提供相应的源代码示例。
最新Vue2.0+组件开源项目库集合
熊大小哥哥
10-11 770
UI组件element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2...
表单设计器2 - form-generator源码学习
FL06052146的博客
03-03 1764
form-generator是基于vue框架的Element UI表单设计及代码生成器。表单设计器，常用于需要给用户提供表单定制功能的场景中。例如开发一套工作流系统，工作流中涉及到的请假、出差、审批等页面或表单，HR是可以自己定义和调整的。表单不是固定的，是在需要的时候创建出来的。
深入浅出form-generator扩展组件
weixin_44815800的博客
09-01 2548
全文6000字带你深入浅出form-generator扩展组件的思路和方法，绝对干货
form-generator扩展原生表格，element-table，子表单等组件
热门推荐
Etc.End的博客
06-10 2万+
的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。但form-generator提供组件并不能满足我们在项目中的使用，比如表格组件，el-table，子表单等等，在很多项目中会经常使用到。
element-extend:扩展元素：修改元素组件
03-23
特别感谢以下机构的慷慨赞助： 适用于Web的Vue.js 2.0 UI工具包。 链接 主页和文档 入门套件 吉特 安装 npm install element-ui -S 快速开始 import Vue from 'vue' import Element from 'element-ui' Vue . use ( Element ) // or import { Select , Button // ... } from 'element-ui' Vue . component ( Select . name , Select ) Vue . component ( Button . name , Button ) 有关更多信息，请参阅我们文档中的“ 。 浏览器支持 现代浏览器和Internet Explorer 10+。 发展 如果只想使用Element，请跳过此部分。
element-uex:对于ElementUI的扩展，包含js组件与样式皮肤
05-29
element-uex 指南 element-uex 是对于ElementUI的扩展，包含js组件与样式皮肤 规范 不要提交 lib 里面打包的文件。 执行 npm run dist 后可以正确打包文件。 开发环境搭建 首先你需要 Node.js 4+ 和 NPM 3+ git clone https://git.oschina.net/dacp/element-uex.git npm run dev # open http://localhost:8085 如果国内用户觉得安装慢可以使用 搭配 taobao registry npm i yarn -g yarn config set registry https://registry.npm.taobao.org yarn npm run dev To build: ```shell npm run dist Icon 图标 API文
form-generator:简单表格生成器
05-21
生成器 ＃在终端中的用法-git clone 表单生成器-nodejs server.js >> 将Form构造函数与您的自定义道具一起使用使用一些公共方法获取Form对象。 var yourForm = new Form（yourprops）; #Example：$ .get（'../ json / response.json'，function（data）{var testForm = new Form（data）; $（'body'）。append（testForm.form.get（））; }）; #Methods：公共：yourForm.fields.get（）-返回包含已创建字段的数组。 yourForm.form.get（）-返回整个表单，您可以追加所需的任何内容； ＃典型结构应如下所示： { "method": "POST", "url": "/f
基于Element库picker组件扩展年份范围组件（基础扩展）
qq_39107452的博客
12-25 509
Element 年份范围组件基础扩展
struts2标签大全
05-29
下面将详细介绍Struts2标签库中的各种标签及其用法。 #### 1. `<s:a>` - 链接标签 该标签用于创建HTML链接。语法如下： ```xml <s:a href="%{url}">Link Text ``` 其中`%{url}`表示链接的目标地址。 #### 2. `...
vue+element创建动态的form表单及动态生成表格的行和列
12-29
动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 　　最后我使用了笨方法,针对各个表单写好通用的组件，然后根据type用v-if来渲染对应的表单,数据，事件什么的都可以动态的传进去,比较好用 <el size=mini class=lj-form> <div v-for=(item,i) key=i> <!-- 0单行文本 --> <el-form-item
Python应用开发——30天学习Streamlit Python包进行APP的构建（25）：Streamlit API 功能列表
最新发布
此星光明博客
08-03 338
【代码】Python应用开发——30天学习Streamlit Python包进行APP的构建（25）：Streamlit API 功能列表。
Vue组件收集
m0_46199530的博客
06-10 1471
Vue组件收集 文章目录Vue组件收集UI组件开发框架实用库服务端辅助工具应用实例Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2
Element-UI介绍：主题定制、自定义组件和插件扩展
weixin_43263566的博客
05-23 5301
Element-UI介绍：主题定制、自定义组件和插件扩展
vue-element-template增加多标签页tagsview
FellAsleep的博客
07-11 1512
vue-element-template增加多标签页tagsview 最后如果你要固定住tagsView,那么这里你需要设置下。
vue3+element plus通用公共表单组件（支持ts）
m0_71537867的博客
04-27 1971
通过基于element plus封装的公共表单组件，只需在要展示表单的容器内将本组件引入，搭配对应的配置项来描述表单内的相关信息（如表单内的展示文本、表单控件类型、校验方式等），就可以实现一个组件满足多种展示需求，从而提升开发效率和代码的可扩展性。
Form Generator添加自定义组件，文本组件
letgooo0的博客
05-16 1567
Form Generator扩展自定义组件，文字类型，支持修改字号颜色粗细对齐方式。
多个tab可以组成一个表单吗 js_11个表单设计小技巧
weixin_39658900的博客
12-10 231
表单设计可能很无聊，用户总是讨厌填写它们。来源：11 form design guidelines表单是任何网站的必要组成部分; 无论是通讯表单，付款细节，帐户创建，获取潜在用户等，用户在使用您的产品时都必须与某种形式进行交互。这篇文章的目的是归纳我在设计更好的表格时遵循的一些关键指导原则。1.保持简短没有人喜欢长篇大论。在设计过程的“定义范围”步骤中，花一些时间来询问每个字段是否对于用户实现其...
vue+element 二次组件封装:表单、列表、下拉树、弹出选择、折叠卡片等(持续更新npm依赖)
⑧o年崋日常记录
10-24 4963
基于vue+element开发前端时,封装的一些组件 安装 npm i lzg-ctrl 组件介绍 lzg-button 按钮控件 # Attributes（属性） 属性 | 说明 | 类型 | 默认值 code | 编码 | String | "" label | 名称 | String | "" type | 类型 | String | "primary" icon | 图标 | String | "" loading | 加载状态 | Boolean | false upload |
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Etc.End

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值