Form Generator扩展 Echarts 图表

已于 2023-07-13 10:28:11 修改
阅读量589 收藏 4
点赞数 1
分类专栏： form generator扩展组件系列 (超级详细) 文章标签： echarts javascript vue.js
于 2023-03-22 09:48:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19991931/article/details/129699195
版权
本文介绍了如何在form-generator项目中扩展Echarts折线图组件，包括安装插件、新建组件文件、配置config.js和修改home.vue。通过render函数实现组件的自定义，提升项目的功能。
摘要由CSDN通过智能技术生成

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

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

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

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

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

了解本专栏 订阅专栏 解锁全文
Etc.End
关注
专栏目录
订阅专栏
Form Generator扩展 Element Table 表格组件
Etc.End的博客
03-10 2450
Form Generator扩展 Element Table 表格组件。从拖拽到浏览再到解析器。
HTML+CSS样式表快速生成器
04-04
HTML+CSS样式表快速生成器
Element UI 表单设计及代码生成器 - form-generator 教程
gitblog_00013的博客
08-08 1248
Element UI 表单设计及代码生成器 - form-generator 教程 项目地址:https://gitcode.com/gh_mirrors/fo/form-generator 1. 项目介绍 form-generator 是一个基于 Element UI 的表单设计与代码生成器工具。它允许用户通过直观的图形界面设计自定义表单，然后自动生成对应的前端代码，简化开发流程，提高效率。这个...
动态生成echart图（拖拽生成echart）并导出json
lalalademax的博客
02-15 1543
组合页面代码 <template> <div class="hello"> <div style="height: 100%;flex: 1;overflow-y: auto"> <vuedraggable :group="{name:'menu',pull:'clone',put:false}" :sort="false" :list="echartArr" @end="addOne" :clone="cloneArr">
前端低代码form-generator的实现及新增自定义组件
三俩句的博客
06-15 8263
form-generator，前端低代码项目，vue，element UI
form-generator ElementUI表单设计及代码生成器
LBJSagiri的博客
09-10 3994
form-generator ElementUI表单设计及代码生成器标题 标题
深入浅出form-generator扩展组件
weixin_44815800的博客
09-01 2629
全文6000字带你深入浅出form-generator扩展组件的思路和方法，绝对干货
form-generator 表单设计
11-10
Element UI表单设计，将生成的代码直接运行在基于Element的vue项目中,也可导出JSON表单，使用配套的解析器将JSON...npm i form-gen-parser@1.0.3 npm install clipboard@2.0.4 --save npm install vuedraggable@2.23.2
form-generator项目集成方案.doc
06-26
form-generator项目集成方案 form-generator项目集成方案是指将form-generator项目集成到本地项目中，以便实现表单可视化设计和生成表单代码的功能。该方案主要涉及到 Vue 项目的多页面结构、组件引入、样式文件...
form_generator
07-03
"form_generator"是一个基于JavaScript技术的项目，主要目标是创建一个动态的、用户友好的表单生成工具。这个工具包含了两个关键文件：`index.html`和`form.php`。 `index.html`是项目的前端界面，它负责展示用户...
若依框架前端form-generator升级为最新版本，添加json解析器，将json配置解析为页面
03-01
在这个项目中，我们关注的是其前端部分，特别是form-generator组件的更新。 form-generator是若依框架中的一个关键组件，主要用于动态生成表单。它允许开发者通过JSON配置来定义表单的布局、字段、验证规则等，进而...
Form Generator 组件自定义事件以及表单联动
Etc.End的博客
03-17 3337
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁 我是Etc.End。如果文章对你有所帮助，能否帮我点个免费的赞和收藏😍。同时欢迎各位小伙伴一起学习，一起成长WX:SH--TS❤️ 💓 💗 💖 ✨ ⭐️ 🌟 💥
form generator 实现表格组件扩展
weixin_44815800的博客
08-31 2107
扩展了form-generator项目的表格功能，主要包含表格编辑、动态数据、自定义列渲染格式功能
Form Generator添加自定义组件，文本组件
letgooo0的博客
05-16 1607
Form Generator扩展自定义组件，文字类型，支持修改字号颜色粗细对齐方式。
form generator ——Element UI表单设计及代码生成器
热门推荐
yehaocheng520的博客
05-25 1万+
form generator Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中。 网站地址:https://mrhj.gitee.io/form-generator/#/ GitHub:https://gitee.com/mrhj/form-generator 网站描述:vue开源Element UI表单设计及代码生成器 特点 插件 可视化设计表单 vscode-plugin分支配套插件为：form-generator-plugin 一键
Form Generator扩展 Element Steps 步骤条
Etc.End的博客
03-15 672
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁我是Etc.End。同时欢迎各位小伙伴一起学习，一起成长WX:👉SH--TS👈。
Form Generator 扩展子表单组件之表单校验
2301_79330511的博客
09-08 216
子表单组件是 Form Generator 的一个扩展，它允许将多个相关的表单字段组合在一起形成一个更复杂的表单。在本文中，我们将探讨如何在 Form Generator 扩展子表单组件中实现表单校验的功能。现在，我们将在子表单组件中添加表单校验的功能。在计算属性中，我们可以根据输入的值来检查是否符合预期的规则，并返回相应的校验结果。通过以上的代码，我们成功地在 Form Generator 扩展的子表单组件中实现了表单校验的功能。现在，我们可以在父组件中使用我们的子表单组件，并检查校验结果。
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
最新发布
zhzijun的博客
11-13 452
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
form generator扩展 el-select 远程搜索
11-05
form generator是一个表单生成器，可以帮助我们快速生成各种表单元素。而el-select是element-ui框架中的一个下拉选择组件。要扩展el-select的远程搜索功能，我们可以按照以下步骤进行。 首先，在form generator的代码中找到生成el-select组件的部分。一般来说，我们可以为el-select设置一个远程搜索的属性，比如remote-search。然后，在该属性的处理逻辑中，我们可以使用element-ui提供的el-autocomplete组件，实现远程搜索的功能。 其次，为了实现远程搜索，我们需要在el-select的远程搜索事件中发送Ajax请求。可以使用Vue.js提供的axios库或者使用element-ui的el-request库来发送请求。在请求中，我们需要传递远程搜索的关键字，一般是通过输入框实时获取用户输入的值。将这个关键字发送到后台，进行搜索操作。搜索的结果可以是JSON格式的数据，包含了符合条件的选项。 最后，当接收到后台返回的搜索结果后，我们可以根据结果来更新el-select的下拉选项列表。可以通过修改el-select的options属性来实现。将搜索结果的数据添加到options列表中，然后重新渲染el-select，用户就可以看到符合搜索条件的选项。 综上所述，要扩展form generator中的el-select的远程搜索功能，我们需要为el-select添加一个remote-search属性，处理该属性对应的远程搜索逻辑，并在搜索结果返回后更新el-select的下拉选项列表。这样，用户在使用表单生成器时可以方便地使用el-select的远程搜索功能，提高了表单的灵活性和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Etc.End

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

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

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

打赏作者

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

抵扣说明：

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

余额充值