文档驱动 —— 表单组件(六):基于AntDV的Form表单的封装,目标还是不写代码
开源代码
https://github.com/naturefwvue/nf-vue3-ant
也不知道大家是怎么写代码的,这里全当抛砖引玉
为何封装?
AntDV非常强大,效果也非常漂亮,功能强大,使用也非常灵活,只是写起来代码有点多。
可以看下面的这个对比图,最右面的是官网的实例代码,非常长,一屏都没放下,中间的是一级封装,把a-input、a-select这类的组件封装起来,最左面是用for循环,遍历字段。
一级封装
针对表单域里面的 a-input、a-select 这类组件进行封装,统一属性和事件,简化操作。这样一行一个字段,写起来就很简洁了,具体封装方法可以看这里:https://www.cnblogs.com/jyk/p/13686742.html
二级封装
使用v-for循环a-form-item,这样字段再多也不怕。 既然看起来这么简洁了,干嘛还要一行一行的写呢?来个for循环他不香吗? 当然可以了,准备好json文件,简单组织一下就好。
"1000":{
"controlId": 1000,
"colName": "companyName",
"controlType": 101,
"isClear": true,
"disabled": false,
"required": true,
"readonly": false,
"pattern": "",
"class": "",
"placeholder": "请输入公司名称",
"title": "公司名称",
"autocomplete": "on",
"size": 30,
"maxlength": 100,
"optionList": [],
"tdCount":1
},
"1001":{
"controlId": 1001,
"colName": "companyCode",
"controlType": 131,
"isClear": true,
"disabled": false,
"required": true,
"readonly": false,
"pattern": "",
"class": "",
"placeholder": "公司邮编",
"title": "公司邮编",
"autocomplete": "on",
"min": 100000,
"max": 999999,
"step": 1,
"maxlength": 6,
"optionList": [],
"tdCount":1
}
......
const json = require('./FormDemo.json') // 加载meta信息,json格式
this.modelValue = reactive({}) // 放数据的model
this.metaInfo = reactive(json.companyForm.formItem) // 表单需要的meta信息
// 根据meta 设置model
for (var key in this.metaInfo) {
var meta = this.metaInfo[key]
this.modelValue[meta.colName] = ''
}
三级封装
把整个表单都做到独立组件里面。 一个实现增删改查的页面里,往往需要数据列表、分页、查询、和表单,如果直接放在一个页面里,还是有点太乱,所以需要进一步封装,就是把添加和修改的表单单独封装在一个组件里面,这样外面的页面就是和表单组件、查询组件、数据列表组件和分页组件对话了,代码会非常简洁。
多行多列的表单咋弄?
AntDV的Form表单似乎只能是单列或者单行的,没发现多行多列的方法。 单列就是下面这样
多行多列是这样
难道现在都不需要这种多行多列的表单了吗?
为啥不自己写个table?
这个还真写了,查询表单就是自己写的table,只是我发现表单验证的功能似乎被AntDV给封装到了Form表单里面,目前还没发现单独使用的方法。 所以目前只好直接封装Form表单来实现表单验证功能了。
- 我的WCF之旅(4):WCF中的序列化[上篇]
- WCF技术剖析之二十八:自己动手获取元数据[附源代码下载]
- 微信年度重磅“小游戏”上线,罗胖一度退出的小程序正在逆袭
- 谈谈WCF中的Data Contract(2):WCF Data Contract对Generic的支持
- Android注解学习(1)
- [WCF权限控制]ASP.NET Roles授权[上篇]
- [WCF权限控制]ASP.NET Roles授权[下篇]
- 如何解决分布式系统中的跨时区问题[实例篇]
- Visual Studio对程序集签名时一个很不好用的地方
- 一个关于解决序列化问题的编程技巧
- [WCF权限控制]从两个重要的概念谈起:Identity与Principal[上篇]
- 从数据到代码——通过代码生成机制实现强类型编程[下篇]
- 谈谈你最熟悉的System.DateTime[下篇]
- 如何解决EnterLib异常处理框架最大的局限——基于异常"类型"的异常处理策略
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- C++使用指针,动态数组,指针做参数需要注意的问题等总结
- POJ 1170 Shopping Offers非状态压缩做法
- HDU 4283 You Are the One
- C++cin,cout以及常见函数总结,cin,cout格式化控制
- 最简单,最明了,看了就会的VScode和C++的配置!(Visual Studio Code)
- C++字符串输入输出以及复合类型浅谈
- Codeforce 1155D Beautiful Array(DP)
- C++类型转换几种情况
- 疯子的算法总结(九) 图论中的矩阵应用 Part 1 POJ3613 Cow Relays
- 『数据库』你这些知识点都不会,你学个锤子SQL数据库!
- The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 XKC's basketball team
- The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 D Carneginon
- 地表最强的MySQL安装一键式安装,信不信你下完我就给你装好!附各种Mysql安装失败的解决办法(什么你安装失败了?快来看这个)
- The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 C Buy Watermelon
- The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 B so easy