文件驅動 —— 表單元件（五）：基於Ant Design Vue 的表單控制元件的demo，再也不需要寫程式碼了。

金色海洋（jyk）發表於2020-09-19
Vue控制元件

原始碼

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即可，再也不用寫程式碼了

後續

查詢控制元件正在完善中
特殊佈局的表單元件也在構思中
......

相關文章