vue3 element form动态表单添加删除 包含校验

可以通过以下步骤实现vue3 element form动态表单添加删除和校验：

1. 创建一个数组来存储表单项的数据，例如：

data() {
  return {
    formItems: [
      { label: '姓名', prop: 'name', value: '', rules: [{ required: true, message: '请输入姓名' }] },
      { label: '年龄', prop: 'age', value: '', rules: [{ required: true, message: '请输入年龄' }, { type: 'number', message: '年龄必须为数字' }] }
    ]
  }
}

2. 在模板中使用`el-form`和`el-form-item`标签来渲染表单，例如：

<el-form :model="formData" :rules="formRules" ref="form">
  <el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.prop">
    <el-input v-model="item.value"></el-input>
    <el-button type="danger" size="small" icon="el-icon-close" @click="removeFormItem(index)" v-if="formItems.length > 1"></el-button>
  </el-form-item>
  <el-button type="primary" @click="addFormItem">添加表单项</el-button>
  <el-button type="primary" @click="submitForm">提交</el-button>
</el-form>

3. 在方法中实现添加和删除表单项的功能，例如：

methods: {
  addFormItem() {
    this.formItems.push({ label: '新表单项', prop: 'new_prop', value: '', rules: [{ required: true, message: '请输入新表单项' }] })
  },
  removeFormItem(index) {
    this.formItems.splice(index, 1)
  },
  submitForm() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        // 表单校验通过，提交表单数据
      } else {
        // 表单校验不通过
      }
    })
  }
}

4. 在表单校验规则中使用动态绑定的方式，例如：

data() {
  return {
    formRules: {}
  }
},
watch: {
  formItems: {
    handler(newValue) {
      this.formRules = {}
      newValue.forEach(item => {
        this.$set(this.formRules, item.prop, item.rules)
      })
    },
    deep: true
  }
}

这样就可以实现vue3 element form动态表单添加删除和校验了。