前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >文档驱动 —— 表单组件(六):基于AntDV的Form表单的封装,目标还是不写代码

文档驱动 —— 表单组件(六):基于AntDV的Form表单的封装,目标还是不写代码

作者头像
用户1174620
发布2020-09-26 16:31:22
1.2K0
发布2020-09-26 16:31:22
举报
文章被收录于专栏:更流畅、简洁的软件开发方式

开源代码

https://github.com/naturefwvue/nf-vue3-ant

也不知道大家是怎么写代码的,这里全当抛砖引玉

为何封装?

AntDV非常强大,效果也非常漂亮,功能强大,使用也非常灵活,只是写起来代码有点多。

可以看下面的这个对比图,最右面的是官网的实例代码,非常长,一屏都没放下,中间的是一级封装,把a-input、a-select这类的组件封装起来,最左面是用for循环,遍历字段。

一级封装

针对表单域里面的 a-input、a-select 这类组件进行封装,统一属性和事件,简化操作。这样一行一个字段,写起来就很简洁了,具体封装方法可以看这里:https://cloud.tencent.com/developer/article/1700465

二级封装

使用v-for循环a-form-item,这样字段再多也不怕。

既然看起来这么简洁了,干嘛还要一行一行的写呢?来个for循环他不香吗?

当然可以了,准备好json文件,简单组织一下就好。

代码语言:javascript
复制
        "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
        }
   ......
代码语言:javascript
复制
 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表单来实现表单验证功能了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 开源代码
  • 为何封装?
  • 一级封装
  • 二级封装
  • 三级封装
  • 多行多列的表单咋弄?
  • 为啥不自己写个table?
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档