vue+element-ui 自动生成表单

可以使用 Element UI 提供的 Form 组件和表单项组件，结合 Vue.js 的动态渲染功能来实现自动生成表单的效果。

首先，需要定义一个表单数据对象，包括每个表单项的类型、名称、值和其他属性。例如：

formData: {
  name: {
    type: 'input',
    label: '姓名',
    value: '',
    required: true,
    placeholder: '请输入姓名'
  },
  age: {
    type: 'number',
    label: '年龄',
    value: 18,
    min: 0,
    max: 100
  },
  gender: {
    type: 'radio',
    label: '性别',
    value: 'male',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  },
  // 其他表单项...
}

然后，在 Vue 组件中使用 Form 和表单项组件来动态渲染表单。可以使用 v-for 指令遍历表单数据对象，根据不同的表单项类型渲染对应的表单项组件。例如：

<el-form ref="form" :model="formData" :rules="rules">
  <el-form-item v-for="(item, key) in formData" :key="key" :prop="key">
    <template v-if="item.type === 'input'">
      <el-input v-model="formData[key].value" :placeholder="item.placeholder" :required="item.required"></el-input>
    </template>
    <template v-if="item.type === 'number'">
      <el-input-number v-model="formData[key].value" :min="item.min" :max="item.max"></el-input-number>
    </template>
    <template v-if="item.type === 'radio'">
      <el-radio-group v-model="formData[key].value">
        <el-radio v-for="(option, index) in item.options" :key="index" :label="option.value">{{ option.label }}</el-radio>
      </el-radio-group>
    </template>
    <!-- 其他表单项类型的渲染 -->
  </el-form-item>
</el-form>

最后，可以添加一个按钮来提交表单数据。在 Vue 组件中定义一个 submit 方法，使用表单的 $refs 属性来获取表单数据并进行提交处理。例如：

methods: {
  submit() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 表单数据验证通过，可以提交数据
        console.log(this.formData);
      } else {
        // 表单数据验证不通过，提示用户修改错误项
      }
    });
  }
}

这样，就可以实现自动生成表单的效果了。可以根据实际需求对表单数据对象和表单项组件进行扩展和定制。