vue3结合Element Plus动态表单组件

<template>
  <el-form :model="formData" ref="formRef" :rules="rules">
    <el-form-item v-for="(item, index) in formData.items" :key="index" :prop="'items.' + index + '.value'" :label="item.label">
      <el-input v-model="item.value"></el-input>
      <el-button @click="removeItem(index)">移除</el-button>
    </el-form-item>
    <el-button @click="addItem">添加项目</el-button>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
 
const formData = reactive({
  items: [
    { label: '项目1', value: '' }
  ]
});
 
const formRef = ref(null);
 
const rules = {
  'items.*.value': [
    { required: true, message: '请输入值', trigger: 'blur' }
  ]
};
 
const addItem = () => {
  formData.items.push({ label: `项目${formData.items.length + 1}`, value: '' });
};
 
const removeItem = (index) => {
  formData.items.splice(index, 1);
};
 
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功');
    } else {
      ElMessage.error('表单验证失败');
    }
  });
};
</script>

这个例子展示了如何在Vue 3和Element Plus中创建一个动态表单。表单中的项目可以动态添加和删除，同时对表单的提交进行了验证。这个例子简洁明了，并且包含了注释，以帮助理解其中的原理。