代码改变世界

文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。

2020-09-19 09:31  金色海洋(jyk)  阅读(1143)  评论(0编辑  收藏  举报

源码

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

特点

  • 只需要更改meta,既可以切换表单
  • 可以统一修改样式,统一升级,以最小的代价,应对UI的升级、切换,应对框架(比如vue)的升级
  • 需要的代码非常少,甚至可以认为是Low Code
  • 可以自动创建model,也可以直接读取model

长啥样?

还是antdv那个样子,只是没有直接使用Form组件,而是用了几个class。(验证功能还在研究中)

表单一 公司信息

表单二 员工信息,简化版,只是为了演示表单的切换。以后会出复杂版

不用改代码,也不用复制粘贴,只需要换meta即可

代码

不写代码,是如何实现表单切换地呢,其实也很简单。
首先要使用基于antdv封装的表单元素组件,然后for循环出来tr,再把组件加到td里面就可以了,操控感十足。
因为都是for出来的,所以表单再大,代码也还是那几行,不会增加。

<template>
  <div class="home">
    <h1>表单演示</h1>
    <div style="background-color:#dddddd;height:600px;width:100px;float:left;">
      <a href="#" @click="myClick('companyForm')">公司信息</a> <br>
      <a href="#" @click="myClick('personForm')">员工信息</a>
    </div>
    <div style="background-color:#eee;height:600px;width:400px;float:left;">
      <div class="ant-table ant-table-body ant-table-default ant-table-bordered" >
        <table>
          <colgroup><col style="width: 30%; min-width: 30%;"><col>
          </colgroup>
          <tbody class="ant-table-tbody">
            <tr v-for="(item,index) in metaInfo" :key="index">
              <td align="right" style="padding:10px 10px;height:20px">
                {{item.title}}:
              </td>
              <td align="left" style="padding:10px 10px;height:20px">
                <nfInput v-model="modelValue[item.colName]" :meta="item" />
              </td>
            </tr>
          </tbody>
        </table>
        </div>
    </div>
    <div align="left" style="background-color:#EEEEFF;height:600px;width:300px;float:left;">
      {<br>
        <span v-for="(item, key, index) in modelValue" :key="index">
          <span v-if="typeof item === 'number' && !isNaN(item)">&nbsp;&nbsp;"{{key}}": {{item}}, <br></span>
          <span v-if="typeof item === 'string'">&nbsp;&nbsp;"{{key}}": "{{item}}", <br></span>
          <span v-if="typeof(item) ==='boolean'">&nbsp;&nbsp;"{{key}}": {{item}}, <br></span>
          <span v-if="typeof(item) ==='object'">
            &nbsp;&nbsp;"{{key}}": [<br>
            <span v-for="(opt, index) in item" :key="'opt'+index">&nbsp;&nbsp;&nbsp;&nbsp;{{opt}}, <br></span>
            &nbsp;&nbsp;]
          </span>
        </span>
      }
    </div>
    <div style="clear:both">
      {{modelValue}}
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'
import nfInput from '@/components/nf-form/nf-form-item.vue'

export default {
  name: 'FormDemo',
  components: {
    // nfHelp,
    nfInput
  },
  setup () {
    const json = require('./FormDemo.json') // 加载meta信息,json格式
    const modelValue = ref({}) // 放数据的model
    const metaInfo = ref(json.companyForm) // 表单需要的meta信息
    const myClick = (key) => {
      // 更换表单的meta
      metaInfo.value = json[key]
      // 创建model
      modelValue.value = {}
      for (var k in metaInfo.value) {
        var item = metaInfo.value[k]
        modelValue.value[item.colName] = ''
      }
    }
    myClick('companyForm') // 设置默认表单
    return {
      modelValue,
      metaInfo,
      myClick
    }
  }
}
</script>

看,代码是不是非常少。两个表单是这些代码,一百个表单也还是这些代码。

增加表单,只需要增加meta即可,再也不用写代码了

后续

查询控件正在完善中
特殊布局的表单组件也在构思中
......

2