elementui 自动生成表单

``

//注册表单
<el-form :model="items" label-width="200px" ref="formRef1" name="form" id="form">

   <el-row>
          

循环出来

     //按列循环
    <el-col :span="12" v-for="(item, index) in items" :key="item.ext.name">

具体每一项，rules为验证规则，v-if为是否显示

    //每一项
    //rules为表单验证规则，是用请求回来的验证规则名称匹配validator里的键值对，取到验证规则
    //v-if为是否显示。
      <el-form-item :label="item.label" :prop="index + '.value'" :rules="validator.get(item.ext.verification)" v-if="item.ext.showTypes.includes(model.isGB)">
        //显示什么类型
          
        <el-input
          v-if="item.elementType == 'Input'"
          v-model="item.value"
          :readonly="item.readonly"
          :disabled="item.disabled"
          :placeholder="item.description"
          :tabindex="item.index"
          :maxlength="item.ext.maxLength"
          :name="item.name"
          show-word-limit
        >
            
        </el-input>
        

等等其他类型与必要的属性,例如el-switch，el-select等，就不一一列举了

     </el-form-item>
    </el-col>
  </el-row>
</el-form>

处理数据的方法

//axios
await axios.get("接口")}then((res) => {
      res.message.forEach((t) => {
        //处理返回值的方法
        //例如，如果select的话，需要加载下拉选框里的数据，请求回来的是一个接口，放在ext.optionTarget里，判断如果有值的话，就请求并且赋值，供下拉框使用
        if (t.ext.optionTarget) {
          axios.get(t.ext.optionTarget).then((res) => {
            t.ext.optionTarget = res.data.message;
            //下拉选框默认值
            t.value = res.data.message[0].cCode;
            //如果请求的数据格式不一样可以再格外处理。
          });
        }
      });
      //处理好的值赋给表单
      this.items = res.message;
    });