Vue3 Element-Plus 一站式生成动态表单：简化前端开发流程

# 创建Vue3项目
vue create dynamic-form-example

# 进入项目目录
cd dynamic-form-example

# 安装Element-Plus
npm install element-plus

<template>
  <el-form :model="formData" :rules="formRules" ref="dynamicForm">
    <el-form-item v-for="(field, index) in formFields" :key="index" :label="field.label" :prop="field.prop">
      <el-input v-if="field.type === 'input'" v-model="formData[field.prop]" :placeholder="field.placeholder"></el-input>
      <el-select v-if="field.type === 'select'" v-model="formData[field.prop]" :placeholder="field.placeholder">
        <el-option v-for="(option, optionIndex) in field.options" :key="optionIndex" :label="option.label" :value="option.value"></el-option>
      </el-select>
      <!-- 其他类型的表单字段 -->
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    formFields: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      formData: {},
      formRules: {},
    };
  },
  methods: {
    submitForm() {
      this.$refs.dynamicForm.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以提交数据或执行其他操作
          console.log('Form submitted:', this.formData);
        } else {
          // 表单验证不通过，提示用户
          this.$message.error('表单验证失败，请检查输入！');
        }
      });
    },
  },
};
</script>

<template>
  <div>
    <dynamic-form :formFields="dynamicFormConfig"></dynamic-form>
  </div>
</template>

<script>
import DynamicForm from "@/components/DynamicForm.vue";

export default {
  components: {
    DynamicForm,
  },
  data() {
    return {
      dynamicFormConfig: [
        {
          label: "用户名",
          prop: "username",
          type: "input",
          placeholder: "请输入用户名",
        },
        {
          label: "角色",
          prop: "role",
          type: "select",
          placeholder: "请选择角色",
          options: [
            { label: "管理员", value: "admin" },
            { label: "普通用户", value: "user"},
          ],
        },
      ],
    };
  },
};
</script>