Form Generator扩展 el-select 数据字典

最新推荐文章于 2024-06-17 11:06:44 发布
最新推荐文章于 2024-06-17 11:06:44 发布
阅读量1.1k 收藏 3
点赞数 1
分类专栏： form generator扩展组件系列 (超级详细) 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19991931/article/details/130926435
版权
本文介绍了如何在form-generator项目中扩展el-select组件以实现数据字典功能。首先，创建ts-select-data-dictionary.vue组件并在相关js文件中注册。接着，更新config.js配置，将el-steps加入布局组件。最后，配置vue.config.js解决跨域问题。通过这个过程，深入理解form-generator中的render渲染函数及其在Vue开发中的重要性。
摘要由CSDN通过智能技术生成

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

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

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

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

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

了解本专栏 订阅专栏 解锁全文
Etc.End
关注
专栏目录
订阅专栏
Form Generator 扩展：使用 el-select 和数据字典进行编程
PixelEnigma的博客
10-01 205
在现代的 Web 开发中，表单是一个非常常见的组件。Vue.js 是一个流行的 JavaScript 框架，它提供了丰富的组件库，其中之一就是 Element UI。Element UI 中的 el-select 组件可以方便地创建下拉选择框，而数据字典则可以用来管理和存储选项数据。本文将介绍如何使用 el-select 组件和数据字典进行编程，实现一个功能强大的表单生成器。
若依vue中关于字典的使用
字节叔叔
04-12 2385
当需要根据字典的value来获取label进行展示，若依提供了selectDictLabel, selectDictLabels两个方法通过value获取label。main.js里已挂载了这两个方法.
dynamicformgenerator:从JSON动态生成表单
04-28
动态生成器 从JSON动态生成表单
flutter 中实现动态表单 form generator
会煮咖啡的猫咪
07-03 955
动态表单是一种可以根据配置数据动态生成的表单，它的作用是允许用户在运行时根据不同的需求动态地创建和修改表单内容。动态表单可以为这些应用程序提供灵活的订单和支付表单，允许用户根据需要动态添加、编辑和删除字段。动态表单可以为这些企业提供灵活的审批表单，允许用户根据需要动态添加和编辑审批字段、审批流程和其他信息。它可以允许用户根据需要动态添加和编辑问题、选项和其他信息，从而创建一个灵活的问卷和调查表单。总之，动态表单可以在许多业务场景中使用，它可以为应用程序提供灵活的数据输入和管理方案，从而满足用户不同的需求。
form generator 表格编辑下拉选择功能
最新发布
weixin_44815800的博客
06-17 1181
formGenerator扩展el-table组件并嵌入行内select功能
给form-generator 添加树tree
foxbamboo的博客
05-14 1364
这里写自定义目录标题给form-generator 添加树tree先看添加自定义组件的说明将组件添加到表单设计器给左侧组件菜单添加树图标右侧添加属性控制完成后的样子 给form-generator 添加树tree form-generator是一个非常好用的前端表单生成器，但其中表单组件中没有tree，今天弄了半天，终于给加上了。 先看添加自定义组件的说明 原说明文档 一定要重视阅读原作者给出的文档。 将组件添加到表单设计器 给左侧组件菜单添加树图标 按文档中的指引，先“在文件src\components\
Form Generator扩展 el-select 远程搜索(从服务器搜索数据，输入关键字进行查找)
Etc.End的博客
05-31 1226
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁我是Etc.End。
Python常用组件、命令大总结(持续更新)
LDC，公众号【轻松学编程】
03-12 1万+
Python后端开发常用组件、命令（干货） 持续更新中… 1、生成6位数字随机验证码 import random import string def num_code(length=6): """ 生成长度为length的数字随机验证码 :param length: 验证码长度 :return: 验证码 """ return ''.jo.....................
Find-Sec-Bugs 漏洞范例
zhaohonghan的博客
04-03 1万+
Find-Sec-Bugs 漏洞范例 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： ...
ruoyi框架字典的使用
qq_33496846的博客
08-01 886
2. 前端限定多选框只能是字典中的选项。这样选择好后，发送给后端的值就是我们字典中定义的值了。3. 最关键的来了，我们如何根据后端传过来的字典的值得到字典中的label显示在前端呢。写给自己看的，就比较简略了。然后在多选框中使用字典。1. 字典定义： 略。
基于若依的ruoyi-nbcio流程管理系统基于form-generator的表单设计器增加子表单的一种简单方法（一）
宁波阿成的博客
02-07 1243
基于若依的ruoyi-nbcio流程管理系统基于form-generator的表单设计器增加子表单的一种简单方法（一）
ruoyi自定义工作流（前端一，集成form-generator）
abc_ABC123A的博客
12-11 4857
集成form-generator 需要引入以下组件 styles代码（src目录下） home.scss $selectedColor: #f6f7ff; $lighterBlue: #409EFF; .container { position: relative; width: 100%; height: 100%; } .components-list { padding: 8px; box-sizing: border-box; height: 100%;
动态加载下拉框(默认选中)
tt336798的博客
08-10 1万+
动态加载下拉框数据 在一个页面中实现修改(包括id取值，修改)，保存操作 今天做的一个下拉框动态加载数据，需求是这样的： 进入到页面的时候，下拉框数据加载完成,页面如下 然后就是需求，先看着这个页面，需要实现根据下拉选择进行查询后面的数据(有点类似级联)，接着判断，这里的判断是：如果下拉选择可以查询到数据，就进行修改操作，没有数据的时候，进行保存操作。 我这里用的数据访...
form-generator解析组件与数据回显
abc_ABC123A的博客
10-30 3646
1. 解析生成配置好的组件 a. 引入解析代码的组件 import Parser from 'form-gen-parser' b. 加入组件到需要展示的位置 <parser :form-conf="formConf"></parser> c. 把需要解析的内容放到formConf中去，需要是json数组对象，不是字符串 this.formConf = JSON.parse(your-formConf) 2. 数据回显 a. 准备数据源 this.formData b. 给f
Form Generator扩展 - el-select 实现远程搜索
Byte_O_O的博客
09-27 287
通过扩展 el-select 组件，我们成功地在 Form Generator 中实现了远程搜索的功能。用户可以根据输入的关键词动态获取选项，提供了更好的用户体验。希望本文对你有所帮助！如有任何问题，请随时提问。
可视化elementUI一键生成代码，拖拽自动布局
weixin_38344204的博客
10-17 1万+
一个不错的elementUI代码生成器，,可视化拖拽自动布局，一键生成代码，一键导出代码，网页设计的低代码平台
[Form Generator][一期替代方案]调用接口数据到opitions
webfullstack的博客
08-07 1403
el-cascader的数据调用 设置新增私有属性 (private_: {assField: ‘’},) 需要每个组件里面都添加(位置组件config.js) // 选择型组件 【左面板】 export const selectComponents = [ { __config__: { private_: {assField: ''}, 新增控制层的代码 代码位置RightPanel.vue(可以使用全局搜索RightPanel找位置) <el-form-item
使用Form Generator解决前端vue+elementUI动态表单功能
热门推荐
Songywaa的博客
09-03 2万+
使用场景： 在添加数据时候，页面上有固定的一部分表单，而另一部分表单相当于扩展属性，想做成动态生成，产品经理可以自己通过配置，页面就有了扩展属性的表单； 关于Form Generator描述 网站网址：添加链接描述 GitHub：添加链接描述 网站描述：基于vue 的element UI 表单设计及代码生成器，可视化设计表单，一键生成原生的vue单页表单代码； vscode插件：form-generator-plugin 具体实现 1、 2、前台页面如何使用 为了方便我们自己测试，就先在前
根据组件类型与条件动态添加下拉框及选项
qq_45670042的博客
06-22 1302
本次在做低代码平台时，遇见了一个稍微有些复杂的业务场景，需求描述：经过梳理后，其实逻辑看起来也不是特别复杂，不过当时确实是有点被难倒了，主要原因就是一些细节性的问题没有考虑到，然后流程图也需要去学习如何操作，时间上有些紧，同时也在思考如何写能够更便于维护。其次就是没有一个清晰的该处业务的流程思考，不过后来捋了捋也就差不多啦，所以说三思而后行啊。Logicflow和FromGenerator就不多说了，虽然也有点坑，但都是轮子，主要记录下这块业务场景如何实现的。处理JSON，不得不提一嘴ES6结构赋值，属实是
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、付费专栏及课程。

余额充值