vue3和element plus动态表单

Vue3和Element Plus可以很方便地实现动态表单。下面是一个简单的示例代码：

<template>
  <form @submit.prevent="submitForm">
    <el-form :model="formData" :rules="formRules" ref="form">
      <el-form-item v-for="(field, index) in formFields" :key="index" :label="field.label" :prop="field.name">
        <template v-if="field.type === 'text'">
          <el-input v-model="formData[field.name]" :placeholder="field.placeholder"></el-input>
        </template>
        <template v-else-if="field.type === 'select'">
          <el-select v-model="formData[field.name]" placeholder="请选择">
            <el-option v-for="option in field.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </template>
        <!-- 其他表单项类型 -->
      </el-form-item>
    </el-form>
    <el-button type="primary" native-type="submit">提交</el-button>
  </form>
</template>

<script>
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from 'element-plus'

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElOption,
    ElButton
  },
  setup() {
    const formData = ref({})
    const formFields = [
      { type: 'text', name: 'username', label: '用户名', placeholder: '请输入用户名' },
      { type: 'select', name: 'gender', label: '性别', options: [
        { value: 'male', label: '男' },
        { value: 'female', label: '女' }
      ]},
      // 其他表单项数据
    ]
    const formRules = ref({})
    formFields.forEach(field => {
      formData.value[field.name] = ''
      formRules.value[field.name] = { required: true, message: '请输入' + field.label, trigger: 'blur' }
    })

    const submitForm = () => {
      // 表单验证
      const form = this.$refs.form
      form.validate(valid => {
        if (valid) {
          // 获取表单数据
          const data = JSON.stringify(formData.value)
          // 处理表单数据
          // ...
        } else {
          return false
        }
      })
    }

    return {
      formData,
      formFields,
      formRules,
      submitForm
    }
  }
}
</script>

在上面的代码中，我们使用了Element Plus的表单组件来生成表单项。在Vue3中，我们使用了`ref`来获取表单实例，以便进行表单验证。在`setup`函数中初始化了表单数据和表单验证规则，并定义了表单提交的方法。在表单提交时，我们先进行表单验证，通过后再获取表单数据并进行处理。