vue3 +element动态表单实现

在Vue 3中使用Element Plus创建动态表单，你可以使用el-form和el-form-item组件来动态渲染表单项。以下是一个简单的例子：

<template>
  <el-form :model="form" ref="formRef" label-width="80px">
    <el-form-item
      v-for="(item, index) in form.items"
      :key="item.key"
      :label="'Item ' + (index + 1)"
      :prop="'items.' + index + '.value'"
      :rules="{ required: true, message: 'Item cannot be empty', trigger: 'blur' }"
    >
      <el-input v-model="item.value"></el-input>
      <el-button @click="removeItem(index)">Delete</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
      <el-button @click="addItem">Add Item</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
 
const form = reactive({
  items: [
    { key: 1, value: '' }
  ]
});
 
const formRef = ref(null);
 
const addItem = () => {
  form.items.push({ key: Date.now(), value: '' });
};
 
const removeItem = (index) => {
  form.items.splice(index, 1);
};
 
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('Form is valid!');
      // Handle submit event
    } else {
      ElMessage.error('Form is invalid!');
      return false;
    }
  });
};
</script>

在这个例子中，我们使用了el-form和el-form-item来创建一个包含动态字段的表单。每个字段都是一个el-input组件，并且可以通过点击按钮来添加或删除字段。提交表单时，会触发表单验证，如果验证通过，会显示成功消息，如果不通过，则显示错误消息。