vue+ant-design+formBuiler表单构建器——技能提升——form design——亲测有效

最近看到后端同事在弄一个后台管理系统,额,前端真的是夹缝中生存啊,AI抢饭碗,后端也想干前端的活儿。。。

他用到了表单构建器,具体效果如下:
在这里插入图片描述
网上有很多适用于ElementUiant-designform design插件,下面介绍一套完整的适用于ant-design的使用方法

步骤1:form-builder组件封装

components中添加form-builder文件夹
文件夹内容如下:
在这里插入图片描述
稍后我会把整个文件夹压缩上传到资源中,有需要的可自行下载。

步骤2:在页面中使用

我这边是在个弹窗中使用的,所以需要在弹窗中引入

<template><a-modalwidth="100%":title="title":visible="visible":confirm-loading="confirmLoading":footer="null"@cancel="handleCancel"><div style="height: 600px;overflow-y:auto;"><FormBuilder v-model="data" :gateway="gateway" :userModel="{}" @getData="saveData" /></div></a-modal>
</template>

对应的script中的代码:

<script>
import FormBuilder from '@/components/form-builder/FormBuilder';
import { addProp, updateProp, getPropDetail } from '@/services/project/propTemplate';//这个是接口,具体得让后端同事处理了。
export default {components: {FormBuilder},data() {return {title: '新增属性',visible: false,confirmLoading: false,data: {propName: '',list: [],config: {}},gateway: this.$store.state.setting.gateway,//gateway: "http://192.168.16.100:9001",也是后端同事提供templateId: '',id: ''}},methods: {showModal(templateId, record) {this.templateId = templateId;if (record) {this.title = '编辑属性';this.id = record.id;this.getDetail();} else {this.title = '新增属性';this.id = '';this.data = {propName: '',list: [],config: {}}}this.visible = true;},getDetail() {getPropDetail({propertyTemplateId: this.templateId,templateId: this.id}).then(res => {this.data = {propName: res.data.name,list: res.data.templateFiled && JSON.parse(res.data.templateFiled),config: res.data.templateText && JSON.parse(res.data.templateText)}})},saveData(v) {this.visible = false;if (this.id) {updateProp({propertyTemplateId: this.templateId,templateId: this.id,//模板属性id}, {name: v.propName,templateText: JSON.stringify(v.config),templateFiled: JSON.stringify(v.data)}).then(res => {this.$message.success('保存成功');this.$emit('ok');})} else {addProp(this.templateId, {name: v.propName,templateText: JSON.stringify(v.config),templateFiled: JSON.stringify(v.data)}).then(res => {this.$message.success('保存成功');this.$emit('ok');})}},handleCancel() {this.visible = false;}}
}
</script>

步骤3:步骤2弹窗的使用

import PropEdit from './PropEdit';
export default {components: {PropEdit},
}

页面使用

<a-button type="primary" @click="$refs.propEdit.showModal(templateId)">新增</a-button>
<PropEdit ref="propEdit" @ok="getPropList"></PropEdit>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/8866.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

武汉星起航:精准市场定位引领跨境电商新潮流,创造辉煌业绩

在跨境电商领域&#xff0c;市场定位的准确性直接关系到企业的成败。武汉星起航电子商务有限公司&#xff0c;凭借其自运营团队的深厚经验和精准洞察力&#xff0c;成功在亚马逊平台开设多家自营店铺&#xff0c;并取得了显著成绩。这一成绩的取得&#xff0c;离不开公司对市场…

SAP实施- 现状调研问卷-如何引导客户提供现状信息

CO篇- 为了避免用户天马行空回答问题&#xff0c;一般SAP实施现状调研阶段都会基于问卷来调研现状 细 类问题 1组织管理现行的管理考核体系中&#xff0c;有没有部门考核机制&#xff1f;评价部门业绩的关键性指标有哪些&#xff1f;公司组织架构及财务会计核算的成本中心是…

等保测评执行指南:Linux系统安全检查命令集锦

在进行等保测评时&#xff0c;会用到多种Linux命令来检查和配置系统的安全设置。以下是一些常用的命令及其用途&#xff1a; 1. **用户和权限相关** - useradd&#xff1a;添加新用户。 - usermod&#xff1a;修改用户属性。 - userdel&#xff1a;删除用户。 - g…

Mysql InnoDB引擎生产环境配置 - 待完善

一. 前言 在生产环境中mysql如何配置, 有什么约定项… 数据库在生产环境运行的时候&#xff0c;你必须根据机器的内存设置合理的buffer pool的大小&#xff0c;然后设置buffer pool的数量&#xff0c;这样的话&#xff0c;可以尽可能的保证你的数据库的高性能和高并发能力。 …

设计模式——行为型模式——策略模式(含实际业务使用示例、可拷贝直接运行)

目录 策略模式 定义 组成和UML图 代码示例 实际业务场景下策略模式的使用 策略模式优缺点 使用场景 JDK中使用策略模式示例 参考文档 策略模式 定义 策略模式定义了一系列算法&#xff0c;并将每个算法封装起来&#xff0c;使它们可以相互替换&#xff0c;且算法的变化…

C#返回多个值的方法

在C#中&#xff0c;返回多个值有多种方法&#xff0c;以下是常用的几种方式&#xff1a; 使用元组&#xff08;Tuples或ValueTuple&#xff09;: 自C# 7.0起&#xff0c;可以使用元组轻松地从方法返回多个值。元组是一种轻量级的数据结构&#xff0c;可以存储不同类型的数据。例…

外贸客户初次合作不付定金你怎么看

小伙伴有没有遇到这种情况&#xff0c;有一个非常大的订单&#xff0c;但是客户又不愿意付定金怎么办&#xff1f;你接还是不接。 那咱们这个小伙伴呢&#xff0c;就是说&#xff0c;这个客户&#xff0c;他是一个中间商&#xff0c;然后中间商的话呢&#xff0c;他这个订单量…

文件的编码格式都在文件中有标注吗

文件的编码格式并不总是在文件中直接标注的&#xff0c;这取决于文件的类型和用途。但是&#xff0c;有几种情况下文件的编码格式可能会被明确标识或可以推断出来&#xff1a; 文本文件&#xff1a; BOM&#xff08;Byte Order Mark&#xff09;&#xff1a;某些文本文件&#…

Redis技术解析

引言 在Java高级开发的道路上&#xff0c;对Redis的掌握是必不可少的一环。Redis&#xff0c;作为一款开源的&#xff0c;内存中的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息中间件。本文将深入探讨Redis的核心技术&#xff0c;并结合Java开发环境&#xff0c…

FMEA助力医疗设备研发制造:领跑未来,实现弯道超车!

医疗设备作为保障人类健康的重要工具&#xff0c;其研发与制造水平直接关系到医疗技术的进步。然而&#xff0c;在激烈的市场竞争中&#xff0c;如何能够让自家医疗设备研发制造实现弯道超车&#xff0c;成为行业佼佼者&#xff1f;答案就在于——FMEA&#xff08;失效模式与影…

go方法定义

方法定义 Golang 方法总是绑定对象实例&#xff0c;并隐式将实例作为第一实参 (receiver)。 只能为当前包内命名类型定义方法。 参数 receiver 可任意命名。如方法中未曾使用 &#xff0c;可省略参数名。 参数 receiver 类型可以是 T 或 *T。基类型 T 不能是接口或指针。 不…

试用NXP官方的UDS bootloader

文章目录 1.前言2.资料获取2.1 MCU例程 2.2 开发环境2.3 上位机2.4 硬件 3.工程修改3.1 boot工程修改 3.2 app工程修改4.测试情况5.例程分享 1.前言 最近很多客户在开发S32K系列MCU时咨询是否可以提供基于UDS协议的bootloader。本文以S32K144为例&#xff0c;介绍如何使用NXP官…

qt基础类型转换

uchar*与QByteArray类型 uchar转为QByteArray QByteArray array; unsigned char buf ; arrayQByteArray::fromRawData((char)buf,sizeof(buf)); QByteArray转为uchar //一次性转换 buf reinterpret_cast<unsigned char*>(array.data()); //单个数据转换 (unsigned cha…

【Mybatis操作数据库】入门(一)

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【MyBatis框架】 本专栏旨在分享MyBatis框架的学习笔记&#xff0c;如有错误定当洗耳恭听&#xff0c;欢迎大家在评论区交流讨论&#x1f…

NGINX App Protect现已支持NGINX开源版 全方位加强现代应用安全防护

近日&#xff0c;F5 NGINX 发布全新升级的NGINX App Protect 5.0版本&#xff0c;将先前专属于NGINX 商业版本NGINX Plus 的现代应用安全能力拓展至NGINX开源版中&#xff0c;为增强现代应用和API安全防护提供全方位支持。此次升级后&#xff0c;适用于云端及本地部署的NGINX A…

软考中级之数据库系统工程师笔记总结(六)多媒体基础

作者&#xff1a;Maynor 博客之星大数据领域Top1,GitHub项目awesome-chatgpt-project作者, 大厂程序员, 全网技术矩阵粉丝7w 公众号&#xff1a;Maynor996&#x1f4e2;博客主页&#xff1a;https://manor.blog.csdn.net &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &am…

基于TL431的线性可调恒压恒流电源的Multisim电路仿真设计

1、线性电源的工作原理 在我们日常应用里&#xff0c;直流电是从市电或电网中的交流电获取的。例如15V直流电压源、24V直流电压源等等。交流电变为直流电的过程大概分为一下几步&#xff1a; 首先&#xff0c;交流电通过变压器降低其电压幅值。接着&#xff0c;经过整流电路进…

【jetson】研华 jetson orin 开发套件系统镜像下载链接、刷入镜像时修改默认用户名的方法

1. 系统镜像下载链接 orin nano 8G&#xff1a;https://pan.baidu.com/s/1iE6ES5yV8CQ85HU0O34mHg?pwdmoyk orin nx 8G&#xff1a;https://pan.baidu.com/s/1F96NN1Hy0meNegzuqW-7mA?pwdqojr orin nx 16G&#xff1a;https://pan.baidu.com/s/1w0Gukoi9Ld-8wZLKQuhcgQ?pwd…

韩顺平0基础学Java——第6天

p87-p109 运算符&#xff08;第四章&#xff09; 四种进制 二进制用0b或0B开头 十进制略 八进制用0开头 十六进制0x或0X开头&#xff0c;其中的A—F不区分大小写 10转2&#xff1a;将这个数不断除以2&#xff0c;直到商为0&#xff0c;然后把每步得到的余数倒过来&#…

储能液冷系统中的管路介绍

储能液冷系统中管路占比约10%。储能液冷管路通过向系统中导入冷却剂&#xff0c;使产热元件与冷却剂进行换热&#xff0c;有效提高能源转化效率&#xff0c;并维持系统的温度稳定。 近年来液冷储能市场的兴起&#xff0c;也为尼龙管路打开了新的市场。储能液冷循环管路按照作用…