四十二

最新推荐文章于 2022-12-12 15:55:02 发布

zch001104

最新推荐文章于 2022-12-12 15:55:02 发布

阅读量209

点赞数

原文链接：https://www.cnblogs.com/wuhuacong/p/14023022.html

版权

首页新闻博问专区闪存班级我的博客我的园子账号设置退出登录注册登录wuhuacong(伍华聪)的专栏随笔 - 684, 文章 - 20, 评论 - 8159, 引用 - 20循序渐进VUE+Element 前端应用开发(27）— 数据表的动态表单设计和数据存储在我们一些系统里面，有时候会需要一些让用户自定义的数据信息，一般这些可以使用扩展JSON进行存储，不过每个业务表的显示项目可能不一样，因此需要根据不同的表单进行设计，然后进行对应的数据存储。本篇随笔结合基于Vue+Element实现动态表单的设计、数据录入存储的相关操作。在我们一些系统里面，有时候会需要一些让用户自定义的数据信息，一般这些可以使用扩展JSON进行存储，不过每个业务表的显示项目可能不一样，因此需要根据不同的表单进行设计，然后进行对应的数据存储。本篇随笔结合基于Vue+Element实现动态表单的设计、数据录入存储的相关操作。1、动态表单的设计动态表单的设计一般是基于某个能够动态设计界面的方式实现的，界面上定义对应的说明以及录入数据的方式，如标签后面加上文本，或者多文本等方式。由于我们后台是强类型的数据实体，后端一般不采用动态修改数据库字段的方式构建，而是采用扩展JSON结构的方式来定义整个动态表单的结构，动态扩展的JSON结构比较弹性，不用可以随时移除，也可随时增加，非常方便，这是一样常见的处理数据结构方式。表单设计器有很多组件可以使用https://github.com/GavinZhuLei/vue-form-makinghttps://github.com/JakHuang/form-generator不过我倾向于使用前者vue-form-making，因为它提供一个设计器的组件，可以集成在项目中使用，而form-generator好像没有找到，只有在线的设计器。不过两者的概念都差不多。vue-form-making的设计器界面如下：而form-generator设计器界面如下，和前者不同的是，这个没有提供组件可以集成在项目里面。有了工具，我们就要考虑如何处理我们具体项目里面表的扩展表单界面的设计工作了。我们设计一个表单用来存储对应的业务表的结构设计，然后在具体表的查看、新增、编辑界面里面，根据键值标识获取对应的动态表单界面，整合到我们实际的界面里面，给用户查看或者录入、编辑等。因此我们在系统模块里面增加一个动态表单的功能入口，以便设计系统所需业务表单的界面结构。这里存储的信息不多，主要就是一个用来区分表单名称的键和说明信息，以及JSON界面结构信息即可。这里【立即编辑】功能就是前面说到的整合表单设计界面的入口。其中使用making-form的代码如下所示，自定义了保存的操作功能。 <el-dialog title=“创建表单” :close-on-click-modal=“false” :append-to-body=“true” :visible=“isShowForm” fullscreen @close=“isShowForm=false”>

<el-button type=“primary” icon=“el-icon-upload” size=“mini” @click=“saveCode()”>保存代码

由于这段代码是在自己定义的组件makingform.vue中处理的，那么获取到JSON信息后，需要抛出一个事件来告诉外部即可。 saveCode() { // 保存代码
const json = this. $r e f s . m a k i n g f o r m . g e t J S O N (); / / g e t H t m l () / / c o n s o l e . l o g (j s o n) t h i s .$ emit(‘save’, JSON.stringify(json)); // 触发事件，返回内容
this.isShowForm = false
}在刚才的界面中，使用自定义的makingform组件代码如下所示。<makingform ref=“makingform” @save=“saveCode” />当然这里保存的操作就是把新的JSON代码存储到界面的textarea组件上了，这样就实现了我们动态表单界面结构JSON的更新了。 saveCode(json) {
if (this.isAdd) {
this.addForm.content = json
} else if (this.isEdit) {
this.editForm.content = json
}
},当然，我们打开makingform组件的时候，如果已经有了JSON信息，那么也是需要加载它已有的界面结果的。在主体调用界面上，我们打开设计界面的时候，就需要传入对应的JSON数据。 showMaking() {
if (this.isAdd) {
this. $KaTeX parse error: Expected 'EOF', got '}' at position 37: \dots)// 显示窗口 }̲ else if (this.\dots$ refs.makingform.show(this.editForm.content)// 显示窗口
}
},而在组件上，我们根据JSON赋值给设计器控件即可。 show(json) { // 显示窗口并加载数据
this.isShowForm = true
if (!this.isEmpty(json)) { // 表单结构
this.jsonData = JSON.parse(json)
// console.log(this.jsonData)
this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots this.$ refs.makingform.setJSON(this.jsonData);
})
}
},有了这些动态表单界面数据的准备，我们就可以在具体表单里面，整合这些设计的界面，从而实现动态表单的展示了。为了比较直观显示我们对应设计的表单，我们也在列表中提供了一个预览的界面，用于预览生成的表单界面效果。单击预览按钮，可以查看具体设计的表单效果，表单的呈现是通过其中的fm-generate-form 来呈现效果的。 2、动态表单的数据存储这里根据上面的动态表单设计的界面，整合并存储对应界面控件的值，从而实现了动态表单和动态表单数据的整合显示了。为了有效管理动态表单的数据和是否展示的处理，我们在业务表单的data属性集合中增加了两个变量，如下所示。 hasDynamicForm: false, // 是否有动态表单
dynamicFormJson: ‘’, // 动态表单的JSON数据这样我们在业务表单列表界面呈现的时候，也同时获取对应的动态界面结构JSON，如下代码所示。 created() {
this.getlist() // 获取并显示列表

// 处理动态表单
var param = { name: 'testuser' }
dynamicForm.FindByName(param).then(data => {
  var result = data.result
  if (result && !this.isEmpty(result.content)) {
    this.dynamicFormJson = result.content // 表单数据
    this.hasDynamicForm = true // 是否有
  }
})

},这些属性，可以在查看、编辑、新增界面中使用，为了独立性考虑，我们添加一个选项卡用来显示动态表单的设计，如果对应的记录中存在了动态表单结构，就显示，否则不显示即可。界面代码如下所示。其中动态表单数据主要存储在extensionData字段里面的。其中的generateform 组件，是我们自定义整合fm-generate-form 组件的，完整的自定义组件generateform代码如下所示。主要就是定义了两个prop属性，一个是json，用来存储结构数据，一个是edit，用来存储界面组件的JSON数据信息的。

3、后端ABP框架的扩展数据处理前面说到的显示动态表单及其数据的内容，其中动态表单数据主要存储在extensionData字段里面的。这个需要我们后端提供数据存储的处理，在设计表中增加一个ntext类型的字段ExtensionData，如下所示。那样ABP后端的Entity实体，和DTO数据对象里面，都添加这个字段信息了 ///

    /// 扩展JSON数据
    /// </summary>
    public string ExtensionData { get; set; }这样ABP就可以通过不同的前端实现数据的存储处理了。 为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：循序渐进VUE+Element 前端应用开发(1）--- 开发环境的准备工作循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用循序渐进VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示 循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理循序渐进VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理 循序渐进VUE+Element 前端应用开发(17）--- 菜单管理循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制  循序渐进VUE+Element 前端应用开发(19）--- 后端查询接口和Vue前端的整合循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码  循序渐进VUE+Element 前端应用开发(21）--- 省市区县联动处理的组件使用循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中 循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理循序渐进VUE+Element 前端应用开发(24）--- 修改密码的前端界面和ABP后端设置处理 循序渐进VUE+Element 前端应用开发(25）--- 各种界面组件的使用（1）循序渐进VUE+Element 前端应用开发(26）--- 各种界面组件的使用（2） ABP框架中一对多，多对多关系的处理以及功能界面的处理（1） 电商商品数据库的设计和功能界面的处理  ABP框架中一对多，多对多关系的处理以及功能界面的处理（2）循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储 主要研究技术：代码生成工具、会员管理系统、客户关系管理软件、病人资料管理软件、Visio二次开发、酒店管理系统、仓库管理系统等共享软件开发
		专注于Winform开发框架/混合式开发框架、Web开发框架、Bootstrap开发框架、微信门户开发框架的研究及应用。

转载请注明出处：
撰写人：伍华聪 http://www.iqidi.com
标签: 循序渐进VUE+Element好文要顶关注我收藏该文伍华聪
关注 - 81
粉丝 - 8677 +加关注 10 1

« 上一篇： ABP框架中一对多，多对多关系的处理以及功能界面的处理（2） posted on 2020-11-23 11:48 伍华聪阅读(761) 评论(4) 编辑收藏

评论#1楼    回复引用大佬为啥不用Angular 支持(0) 反对(0) https://pic.cnblogs.com/face/1738084/20201102103238.png 2020-11-23 11:52 | 清欢Blog #2楼 [楼主]    回复引用 @清欢Blog
弱水三千只取一瓢支持(0) 反对(0) https://pic.cnblogs.com/face/u8867.png 2020-11-23 11:56 | 伍华聪 #3楼    回复引用 @清欢Blog
国内新项目还有用Angular的？只以前做后端的时候知道Angular.js，真正做前端后就只知道react和vue了支持(0) 反对(0) https://pic.cnblogs.com/face/413851/20161114093458.png 2020-11-23 13:06 | 邹琼俊 #4楼 47503792020/11/24 上午8:10:30    回复引用 @邹琼俊
angular.js都是N年前的东西了现在都是angular2的迭代版本支持(0) 反对(0) 2020-11-24 08:10 | 薛家明刷新评论刷新页面返回顶部

发表评论【福利】注册AWS账号，立享12个月免费套餐编辑预览 7693b08a-a8f6-49f3-f45a-08d88556cc23 Markdown 帮助自动补全不改了退出订阅评论 [Ctrl+Enter快捷键提交]

首页新闻博问专区闪存班级【推荐】News: 大型组态、工控、仿真、CADGIS 50万行VC++源码免费下载
【推荐】从零开始的RPG游戏制作教程，来《魔兽争霸III》共同成长
【推荐】了不起的开发者，挡不住的华为，园子里的品牌专区
【推荐】未知数的距离，毫秒间的传递，声网与你实时互动
【福利】AWS携手博客园为开发者送免费套餐与抵扣券
【推荐】阿里云折扣价格返场，错过再等一年
相关博文：
· vue----element-ui
· vueelement全选
· Vue+ElementUI（table）
· vue&element-ui&tablerowindex
· vuecli安装element-ui
» 更多推荐…最新 IT 新闻:
· 整整10年了！这就是微信的第一段代码
· Google Assistant现在可以用来控制智能灯具
· 微软投资2700万欧元在爱尔兰开设工程中心设立200个新岗位
· 开发人员已进行175小时《赛博朋克2077》仍未打完
· 谷歌Stadia云游戏即将在iPhone上推出公测版本
» 更多新闻… 历史上的今天：
2007-11-23 如何获取类或属性的自定义特性(Attribute)
2007-11-23 记录转化为有层次结构的树状列表的通用算法

导航博客园首页新随笔联系订阅管理 < 2020年11月> 日一二三四五六 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9 10 11 12

公告昵称：伍华聪
园龄： 15年4个月
粉丝： 8677
关注： 81 +加关注

搜索常用链接我的随笔我的评论我的参与最新评论我的标签最新随笔1.循序渐进VUE+Element 前端应用开发(27）— 数据表的动态表单设计和数据存储 2.ABP框架中一对多，多对多关系的处理以及功能界面的处理（2） 3.电商商品数据库的设计和功能界面的处理 4.ABP框架中一对多，多对多关系的处理以及功能界面的处理（1） 5.循序渐进VUE+Element 前端应用开发(26）— 各种界面组件的使用（2） 6.循序渐进VUE+Element 前端应用开发(25）— 各种界面组件的使用（1） 7.循序渐进VUE+Element 前端应用开发(24）— 修改密码的前端界面和ABP后端设置处理 8.循序渐进VUE+Element 前端应用开发(23）— 基于ABP实现前后端的附件上传，图片或者附件展示管理 9.循序渐进VUE+Element 前端应用开发(22）— 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中 10.循序渐进VUE+Element 前端应用开发(21）— 省市区县联动处理的组件使用我的标签Winform开发框架(168) WinForm界面开发(82) 开发辅助(78) 微信公众平台及门户应用(76) Web开发框架(49) Bootstrap开发框架(47) 代码生成工具(38) 共享软件开发交流(38) 循序渐进VUE+Element(30) ABP框架使用(26) 更多积分与排名积分 - 2063869 排名 - 43 随笔档案 (684) 2020年11月(6) 2020年10月(4) 2020年9月(5) 2020年8月(1) 2020年7月(7) 2020年6月(9) 2020年5月(4) 2020年4月(3) 2020年3月(5) 2020年1月(3) 2019年12月(2) 2019年11月(4) 2019年10月(8) 2019年9月(1) 2019年7月(6) 2019年6月(8) 2019年5月(5) 2019年4月(3) 2019年3月(5) 2019年2月(7) 文章分类 (19) 开发的共享软件(19) 我的好友黎波(Blogs) 吉日嘎拉 Winform开发框架我的简书博客张善友我的技术支持站点广州爱奇迪 Database2Sharp下载简书博客最新评论1. Re:循序渐进VUE+Element 前端应用开发(27）— 数据表的动态表单设计和数据存储@邹琼俊 angular.js都是N年前的东西了现在都是angular2的迭代版本…–薛家明2. Re:循序渐进VUE+Element 前端应用开发(27）— 数据表的动态表单设计和数据存储@清欢Blog 国内新项目还有用Angular的？只以前做后端的时候知道Angular.js，真正做前端后就只知道react和vue了…–邹琼俊3. Re:循序渐进VUE+Element 前端应用开发(27）— 数据表的动态表单设计和数据存储@清欢Blog 弱水三千只取一瓢…–伍华聪4. Re:循序渐进VUE+Element 前端应用开发(27）— 数据表的动态表单设计和数据存储大佬为啥不用Angular–清欢Blog5. Re:在DevExpress程序中使用GridView直接录入数据的时候，增加列表选择的功能fixed–Jonny-Xhl阅读排行榜 1. DevExpress控件使用经验总结(230113) 2. 基于MVC4+EasyUI的Web开发框架形成之旅–界面控件的使用(223201) 3. 基于Metronic的Bootstrap开发框架经验总结（5）–Bootstrap文件上传插件File Input的使用(211831) 4. 基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理(198178) 5. 合理的布局，绚丽的样式，谈谈Winform程序的界面设计(174368) 6. Winform开发框架主界面设计展示(146972) 7. Web API接口设计经验总结(129973) 8. 基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理(127386) 9. 基于Metronic的Bootstrap开发框架经验总结（3）–下拉列表Select2插件的使用(126000) 10. C#开发微信门户及应用(1)–开始使用微信接口(118575) 评论排行榜 1. 厚积薄发，丰富的公用类库积累，助你高效进行系统开发（4）----CSV、Excel、INI文件、独立存储等文件相关(201) 2. 基于MVC4+EasyUI的Web开发框架形成之旅–界面控件的使用(186) 3. 厚积薄发，丰富的公用类库积累，助你高效进行系统开发（1）----开篇总结(176) 4. 厚积薄发，丰富的公用类库积累，助你高效进行系统开发（12）— 网络相关操作辅助类(123) 5. 厚积薄发，丰富的公用类库积累，助你高效进行系统开发（14）—Winform开发的常用类库（终结篇，CHM文档放送）(102) 推荐排行榜 1. C#开发微信门户及应用(1)–开始使用微信接口(77) 2. 基于MVC4+EasyUI的Web开发框架形成之旅–界面控件的使用(70) 3. 厚积薄发，丰富的公用类库积累，助你高效进行系统开发（1）----开篇总结(66) 4. C#开发微信门户及应用(19)-微信企业号的消息发送（文本、图片、文件、语音、视频、图文消息等）(52) 5. 厚积薄发，丰富的公用类库积累，助你高效进行系统开发（14）—Winform开发的常用类库（终结篇，CHM文档放送）(44)