動態表單生成

ElementUI官網引導

Element表單生成
Element動態增減表單,在線代碼

關鍵配置

template中,form和form-item的寫法和綁定 data里的值為空 methods中，向后臺獲取數據的函數寫法

 1. form,form-item,input的寫法[^code]

 <el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicValidateForm">    <el-form-item :key="domain.prop"           :label="domain.label"           :prop="domain.prop"           :rules="rules"           v-for="domain in dynamicValidateForm.domains">      <el-input  type="money"             :disabled="domain.editable"            autocomplete="off"            v-model.number="domain.value">      </el-input>    </el-form-item>  </el-form>

需要注意的是，:model和ref綁定的值不能用'form'來表示，不然會出錯。
也就是說下面的寫法會導致運行不報錯，但是結果會顯示不出來
問題代碼:

 <el-form :model="form" label-width="120px" ref="form">  </el-form>

我上的代碼里面，基本讓后臺傳回來的數據里包含prop,label,value（輸入框默認值填入）,editable(是否可編輯)四個值。
當然，如果你還想動態定義類型，就讓后端多傳一個type，用v-if判斷一下type是input或者radio或者其他類型就行，網上也有很多類似的解讀，此處僅討論input輸入框。

2. data里的值為空[^code]

 data () {    return {        dynamicValidateForm: [        domains: {}          ],        rules: [],        id: ''        }      }

此處rules為什么不寫校驗規則，原因是不能判斷后端會返回多少個輸入框表單類型，你就不能判斷你需要在domains里占用多少占位符。

如果你強行寫上rules校驗，會導致界面提示你輸入沒空（就算你確實輸入了值），因為你沒有在domains里寫上若干個對象(如下)，但是現在的需求是讓后端定義數量，所以前端不能確定多少個就不能使用下面的寫法，所以就不能在rules里寫校驗。

問題代碼:

 data () {    return {      dynamicValidateForm: [        domains: {          {            prop: '',            label: ''          },          {            prop: '',            label: ''          }        }      ],      rules: [],      id: ''        }      }

3. methods中，向后臺獲取數據的函數寫法

methods中，向后臺獲取數據的函數寫法

showEdit () {   let formData = new FormData()   formData.append('id', this.id)   let config = {headers: {'Content-Type': 'multipart/form-data'}}   this.$http.post('/getform', formData, config).then(res => {    this.dynamicValidateForm.domains = []    for (var j = 0; j < res.data.data.length; j++) {     var obj = {}     obj.label = res.data.data[j].label     obj.prop = res.data.data[j].prop     obj.value = res.data.data[j].value     obj.editable = res.data.data[j].editable     this.dynamicValidateForm.domains.push(obj)    }    console.log(this.dynamicValidateForm.domains)   })  }