Vue 3 动态表单，基于elmentplus 组件实现

示例代码

<script setup>
import { ref,onMounted} from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios'

const formItems = [
  {
    label: '用户名',
    prop: 'username',
    component: 'el-input',
    props: {
      placeholder: '请输入用户名',
    },
  },
  {
    label: '性别',
    prop: 'gender',
    component: 'el-radio-group',
    props: {},
    slots: {
      default: [
        {
          component: 'el-radio',
          props: { value: 'male', label: '男' },
        },
        {
          component: 'el-radio',
          props: { value: 'female', label: '女' },
        },
      ],
    },
  },
  {
    label: '国家',
    prop: 'country',
    component: 'el-select',
    props: {
      placeholder: '请选择国家',
    },
    slots: {
      default: [
        {
          component: 'el-option',
          props: { label: '中国', value: 'China' },
        },
        {
          component: 'el-option',
          props: { label: '美国', value: 'USA' },
        },
      ],
    },
  }, 
    {
    label: '爱好',
    prop: 'hobby',
    component: 'el-checkbox-group',
    props: {
      placeholder: '爱好',
    },
    slots: {
      default: [
        {
          component: 'el-checkbox',
          props: { label: '篮球', value: 'China' },
        },
        {
          component: 'el-checkbox',
          props: { label: '足球', value: 'USA' },
        },
      ],
    },
  },  
  {
    label: '生日',
    prop: 'birthday',
    component: 'el-date-picker',
    props: {
      placeholder: '请输入生日',
    },
  },
    {
    label: '开关',
    prop: 'elswitch',
    component: 'el-switch',
    props: {
      placeholder: '请输入用户名',
    },
  },
    {
    label: '时间',
    prop: 'eltimepicker',
    component: 'el-time-picker',
    props: {
      placeholder: '请输入用户名',
    },
  },
    {
    label: '下拉时间',
    prop: 'eltimeselect',
    component: 'el-time-select',
    props: {
      placeholder: '请输入下拉时间',
    },
  },
    {
    label: '用户名',
    prop: 'username5',
    component: 'el-input',
    props: {
      placeholder: '请输入用户名',
    },
  },
];
const editForm = ref({
  username: '',
  gender: '',
  country: '',
});
const rules = ref({
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  gender: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    }
  ],
  country: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    }
  ],
  birthday: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    }
  ]});

const editFormRef = ref(null)


const submitEdit =async () => {

 await  editFormRef.value.formRef.validate((valid,fields) => {
    if (valid) {
      console.log('提交成功', editForm.value)         
      
      ElMessage({
              message:editForm,  
              grouping: true,
              showClose: true,
              type: 'success',
            })
    } else {
      console.log('验证失败',valid)
      return false
    }
  })
};

const resetForm = () => {
  editFormRef.value.formRef.resetFields()
}

//支持后台读取JSON模式
onMounted(() => {  
    // let response2 = await axios.get('/public/getFormRule.json');
    // console.log("rules:response.data",response2.data)
    // rules.value = response2.data;    

    // let response =  await  axios.get('/public/getFormItems.json');    
    // console.log("formItems:response.data",response.data)
    // formItems.value = response.data; 

    // let queryString = window.location.search;
    // let urlParams = new URLSearchParams(queryString);
    // let id = urlParams.get('id'); 
    //  if(id){
    //     let response3 = await axios.get('/public/getFormData.json');
    //     editForm.value=response3.data;  
    //  }

});  
 
</script>

<template>

  <DynamicFluidForm
    ref="editFormRef"
    :form-data="editForm"
    :form-items="formItems"
    :formLabelWidth="85"
    :rules="rules"
  />
  <el-button
    :loading="false"
    size="small"
    type="primary"
    @click="submitEdit(ruleFormRef)"
  >
    确 定
  </el-button>
  <el-button
    :loading="false"
    size="small"
    type="primary"
    @click="resetForm"
  >
    重 置
  </el-button>
</template>