文件驅動 —— 表單元件（五）：基於Ant Design Vue 的表單控制元件的demo，再也不需要寫程式碼了。
阿新 • • 發佈：2020-09-19
# 原始碼
[https://github.com/naturefwvue/nf-vue3-ant](https://github.com/naturefwvue/nf-vue3-ant)
# 特點
* 只需要更改meta，既可以切換表單
* 可以統一修改樣式，統一升級，以最小的代價，應對UI的升級、切換，應對框架（比如vue）的升級
* 需要的程式碼非常少，甚至可以認為是Low Code
* 可以自動建立model，也可以直接讀取model
# 長啥樣？
還是antdv那個樣子，只是沒有直接使用Form元件，而是用了幾個class。（驗證功能還在研究中）
## 表單一 公司資訊
## 表單二 員工資訊，簡化版，只是為了演示表單的切換。以後會出複雜版
> 不用改程式碼，也不用複製貼上，只需要換meta即可
# 程式碼
不寫程式碼，是如何實現表單切換地呢，其實也很簡單。
首先要使用基於antdv封裝的表單元素元件，然後for迴圈出來tr，再把元件加到td裡面就可以了，操控感十足。
因為都是for出來的，所以表單再大，程式碼也還是那幾行，不會增加。
~~~
員工資訊
{
"{{key}}": {{item}},
"{{key}}": "{{item}}",
"{{key}}": {{item}},
"{{key}}": [
{{opt}},
] } {{modelValue}}
表單演示
公司資訊員工資訊
| {{item.title}}： |
|
"{{key}}": {{item}},
"{{key}}": "{{item}}",
"{{key}}": {{item}},
"{{key}}": [
{{opt}},
] } {{modelValue}}