代码改变世界

文档驱动 —— 表单组件（五）：基于Ant Design Vue 的表单控件的demo，再也不需要写代码了。

2020-09-19 09:31  金色海洋（jyk）  阅读(1148)  评论(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