vue element-ui 如何为动态表单创建 校验

Vue 和 Element-UI 的表单校验非常方便，只需要在表单项上添加相应的属性即可。下面是一个示例，展示如何为动态表单创建校验。

假设我们有一个动态表单，表单内容由后端返回，包含表单项的类型、名称、默认值、是否必填等信息，我们需要根据这些信息生成表单，并对表单进行校验。

<template>
  <el-form ref="dynamicForm" :model="formData" :rules="rules" label-width="120px">
    <el-form-item v-for="item in formItems" :key="item.name" :label="item.label" :prop="item.name">
      <el-input v-if="item.type === 'input'" v-model="formData[item.name]" :placeholder="item.placeholder"></el-input>
      <el-select v-else-if="item.type === 'select'" v-model="formData[item.name]" :placeholder="item.placeholder">
        <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
      </el-select>
      <el-date-picker v-else-if="item.type === 'date'" v-model="formData[item.name]" :type="item.dateType" :placeholder="item.placeholder"></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formItems: [], // 后端返回的表单项信息
      formData: {}, // 表单数据
      rules: {}, // 表单校验规则
    };
  },
  methods: {
    submitForm() {
      this.$refs.dynamicForm.validate(valid => {
        if (valid) {
          // 表单校验通过，可以提交数据
          console.log(this.formData);
        } else {
          // 表单校验不通过，可以提示用户
          console.log('校验不通过');
          return false;
        }
      });
    },
  },
  created() {
    // 模拟后端返回的表单项信息
    setTimeout(() => {
      this.formItems = [
        {
          type: 'input',
          name: 'username',
          label: '用户名',
          placeholder: '请输入用户名',
          required: true,
        },
        {
          type: 'select',
          name: 'gender',
          label: '性别',
          placeholder: '请选择性别',
          required: true,
          options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' },
          ],
        },
        {
          type: 'date',
          name: 'birthday',
          label: '出生日期',
          placeholder: '请选择出生日期',
          required: true,
          dateType: 'date',
        },
      ];

      // 根据表单项信息生成表单校验规则
      this.formItems.forEach(item => {
        if (item.required) {
          this.$set(this.rules, item.name, { required: true, message: `${item.label}不能为空`, trigger: 'blur' });
        }
      });
    }, 1000);
  },
};
</script>

上面的代码中，我们使用了 `v-for` 指令根据后端返回的表单项信息动态生成了表单。对于每个表单项，我们根据 `required` 属性生成了相应的校验规则，并将规则绑定到了表单上。在提交表单时，我们调用了表单的 `validate` 方法进行校验，根据校验结果决定是否提交数据。

需要注意的是，动态表单的校验规则需要在表单项生成后才能生成，否则可能会因为表单项尚未生成而导致校验规则绑定失败。因此，我们在 `created` 钩子函数中进行了表单项和校验规则的生成。如果你的表单数据是通过异步请求获取的，可以在请求回调中生成表单和校验规则。