Vue3 + Element Plus 动态表单实现

 完整代码

后端API数据结构建议

后端API返回的表单配置建议采用如下JSON格式：

{
  "code": 200,
  "message": "success",
  "data": {
    "fields": [
      {
        "name": "username",
        "label": "用户名",
        "type": "input",
        "required": true,
        "placeholder": "请输入用户名",
        "inputType": "text",
        "maxlength": 20,
        "rules": [
          {
            "pattern": "^[a-zA-Z0-9_]+$",
            "message": "只能包含字母、数字和下划线"
          }
        ]
      },
      {
        "name": "gender",
        "label": "性别",
        "type": "select",
        "required": true,
        "options": [
          {
            "label": "男",
            "value": "male"
          },
          {
            "label": "女",
            "value": "female"
          }
        ]
      },
      {
        "name": "subscribe",
        "label": "订阅通知",
        "type": "switch",
        "defaultValue": true
      }
    ]
  }
}