动态表单示例

使用 form-create 动态渲染表单，支持表单设计器。

功能特性

• 📝 表单列表 - 管理多个表单模板
• 🎨 动态渲染 - 根据配置动态生成表单
• ✅ 表单验证 - 支持各种验证规则
• 👁️ 数据预览 - 查看表单提交数据

完整代码

点击查看完整代码

<template>
  <div class="page-container">
    <div class="toolbar">
      <div class="toolbar-left">
        <h2 class="page-title">
          <el-icon><Document /></el-icon>
          动态表单示例
        </h2>
        <span class="page-subtitle">使用 form-create 动态渲染表单</span>
      </div>
    </div>

    <div class="content-wrapper">
      <!-- 左侧表单列表 -->
      <div class="form-panel">
        <div class="panel-header">
          <span class="panel-title">表单列表</span>
        </div>
        <div class="list-content">
          <div
            v-for="item in formList"
            :key="item.id"
            class="form-item"
            :class="{ active: currentForm?.id === item.id }"
            @click="selectForm(item)"
          >
            <div class="form-item-header">
              <el-icon><Document /></el-icon>
              <span class="form-name">{{ item.formName }}</span>
            </div>
            <div class="form-item-desc">{{ item.description || '暂无描述' }}</div>
          </div>
        </div>
      </div>

      <!-- 右侧表单渲染区域 -->
      <div class="render-panel">
        <div v-if="!currentForm" class="empty-state">
          <el-empty description="请从左侧选择一个表单" />
        </div>
        <template v-else>
          <div class="render-header">
            <div class="header-left">
              <h3>{{ currentForm.formName }}</h3>
              <p>{{ currentForm.description }}</p>
            </div>
            <div class="header-right">
              <el-button @click="resetForm">重置</el-button>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
          </div>
          <div class="render-content">
            <form-create
              v-model="formData"
              v-model:api="fApi"
              :rule="formRules"
              :option="formOptions"
            />
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Document } from '@element-plus/icons-vue'
import FormCreate from '@form-create/element-ui'

const formList = ref([
  {
    id: '1',
    formName: '用户信息表单',
    description: '收集用户基本信息',
    formConfig: {
      rule: [
        {
          type: 'input',
          field: 'username',
          title: '用户名',
          value: '',
          validate: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
        },
        {
          type: 'select',
          field: 'gender',
          title: '性别',
          options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' }
          ]
        }
      ]
    }
  }
])

const currentForm = ref(null)
const fApi = ref(null)
const formData = ref({})
const formRules = ref([])
const formOptions = reactive({
  form: { labelWidth: '100px' },
  submitBtn: false,
  resetBtn: false
})

const selectForm = (form) => {
  currentForm.value = form
  if (form.formConfig?.rule) {
    formRules.value = form.formConfig.rule
  }
}

const resetForm = () => {
  fApi.value?.resetFields()
}

const submitForm = async () => {
  const valid = await fApi.value?.validate()
  if (valid) {
    ElMessage.success('提交成功')
  }
}
</script>

核心要点

1. 安装依赖

npm install @form-create/element-ui

2. 表单规则配置

const rule = [
  {
    type: 'input',      // 组件类型
    field: 'username',  // 字段名
    title: '用户名',    // 标签
    value: '',          // 默认值
    props: {},          // 组件属性
    validate: []        // 验证规则
  }
]

3. 支持的组件类型

• input - 输入框
• select - 下拉选择
• radio - 单选框
• checkbox - 复选框
• switch - 开关
• datePicker - 日期选择
• inputNumber - 数字输入
• rate - 评分
• slider - 滑块
• colorPicker - 颜色选择