elementui表单动态添加校验规则

在Element UI中，可以使用this.$refs.form.validateField方法动态地为表单项添加验证规则。以下是一个简单的例子，展示了如何在Vue组件中实现这一功能。

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-form-item v-for="(item, index) in form.items" :key="index" :prop="'items.' + index + '.value'" :label="'Item ' + (index + 1)">
      <el-input v-model="item.value">
        <template slot="append">单位</template>
      </el-input>
      <el-button @click="removeItem(index)">删除</el-button>
    </el-form-item>
    <el-button @click="addItem">添加项目</el-button>
    <el-button type="primary" @click="validateForm">验证表单</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        items: [{ value: '' }]
      },
      rules: {
        'items.[0].value': [
          { required: true, message: '请输入值', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    addItem() {
      this.form.items.push({ value: '' });
      this.$nextTick(() => {
        // 添加新项后，为最后一项动态添加验证规则
        const lastIndex = this.form.items.length - 1;
        this.$refs.form.validateField(`items.${lastIndex}.value`);
      });
    },
    removeItem(index) {
      this.form.items.splice(index, 1);
    },
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('验证通过');
        } else {
          alert('验证失败');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，我们有一个表单，用户可以动态添加和删除项目。每个项目都有一个对应的输入框，我们为第一个项目添加了必填的验证规则。当用户点击添加项目时，我们使用this.$refs.form.validateField来为新添加的项目动态添加验证规则。这样，每个项目都会根据用户的操作动态地添加相应的验证规则。