文件驅動 —— 表單元件(五):基於Ant Design Vue 的表單控制元件的demo,再也不需要寫程式碼了。
阿新 • • 發佈:2020-09-19
原始碼
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)"> "{{key}}": {{item}}, <br></span> <span v-if="typeof item === 'string'"> "{{key}}": "{{item}}", <br></span> <span v-if="typeof(item) ==='boolean'"> "{{key}}": {{item}}, <br></span> <span v-if="typeof(item) ==='object'"> "{{key}}": [<br> <span v-for="(opt, index) in item" :key="'opt'+index"> {{opt}}, <br></span> ] </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即可,再也不用寫程式碼了
後續
查詢控制元件正在完善中
特殊佈局的表單元件也在構思中
......