文档驱动 —— 表单组件（六）：基于AntDV的Form表单的封装，目标还是不写代码

用户1174620

发布于 2020-09-26 08:31:22

1.2K00

代码可运行

文章被收录于专栏：更流畅、简洁的软件开发方式更流畅、简洁的软件开发方式

运行总次数：0

代码可运行

开源代码

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文件，简单组织一下就好。

        "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] = ''
    }