vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法

在Vue中使用Element UI的el-form组件动态添加el-form-item并支持自定义验证规则，可以通过以下步骤实现：

1. 在data中定义一个表单数据对象和验证规则对象。
2. 使用v-for指令在el-form内循环渲染el-form-item。
3. 使用v-model绑定动态数据。
4. 使用:rules属性应用动态验证规则。
5. 如果需要自定义验证方法，可以在methods中定义并在验证规则中引用。

以下是一个简单的示例代码：

<template>
  <el-form :model="dynamicForm" :rules="rules" ref="dynamicForm">
    <el-form-item
      v-for="(item, index) in dynamicForm.items"
      :key="index"
      :label="'Item ' + (index + 1)"
      :prop="'items.' + index + '.value'"
      :rules="{ required: true, message: 'Item value is required', trigger: 'blur' }"
    >
      <el-input v-model="item.value"></el-input>
    </el-form-item>
    <el-button @click="addItem">Add Item</el-button>
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      dynamicForm: {
        items: [
          { value: '' } // 初始为一个空的item
        ]
      },
      rules: {
        // 可以定义更多的全局验证规则
      },
    };
  },
  methods: {
    addItem() {
      this.dynamicForm.items.push({ value: '' });
    },
    submitForm() {
      this.$refs.dynamicForm.validate((valid) => {
        if (valid) {
          alert('Form is valid!');
        } else {
          console.log('Form is invalid');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，我们定义了一个dynamicForm对象，它包含一个items数组，每个数组项都对应一个el-form-item。我们使用v-for来渲染这些项，并通过:prop属性指定每个表单项的验证字段。

addItem方法用于添加新的空表单项，submitForm方法用于提交表单并触发验证。如果你需要自定义验证方法，可以在methods中定义一个函数，并在rules对象中引用它。