vue - element ui 动态表单校验

最近做项目过程中需要进行动态表单校验，但是打印 value 值一直是 undefined 的问题。

1. 为什么在自定义校验方式中 value 的值是 undefined

      a. el-form 没有绑定 mode
      b. v-mode 绑定的属性没有在data 中声明
      c. el-form-item 上的prop名称不对，或者 prop 路径不对；
      d. el-form-item 没有特定指定 rules 时, prop 和 rules 中的名称一致

 2. 为什么会这个错误 [Vue warn]: Error in mounted hook: "Error: please transfer a valid prop path to form item!"

        el-form-item 中 prop 的 path 是相对于 el-from 绑定的 model 而言的
        例如：formdata 是这样一个接口 formdata:{  a:1 b:{  arr: [ { c:5, d:5  } ]  }  }
        属性 prop path：     a => a
                                        c => b.arr.{索引}.c
                                        d => b.arr.{索引}.d

以下是详细代码：

<template>
  <el-form ref="form" :model="configFrom" :rules="rules" label-width="80px">
    <!-- 默认配置  -->
    <el-row v-for="(item, index) in configFrom.default.data" :key="index">
      <el-col :span="12">
        <el-row>
          <el-col :span="10">
            <el-form-item
              label="开始(天)"
              :rules="rules.validateDynamicDate"
              :prop="`default.data.${index}.beginDate`"
            >
              <el-input v-model="item.beginDate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item>
        <el-button type="primary" @click.prevent="SaveConfig"
          >立即创建</el-button
        >
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
export default {
  data() {
    const validatorDynamicDate = (rule, value, callback) => {
      console.log(value);
      console.log(rule);
      callback();
    };
    return {
      configFrom: {
        default: {
          type: 1,
          status: 1,
          data: [
            {
              beginDate: "100",
              endDate: "∞",
              minRatio: "",
              maxRatio: "",
            },
          ],
        },
        userdefined: {
          type: 2,
          status: 0,
          data: [
            {
              beginDate: "1",
              endDate: "∞",
              minRatio: "",
              maxRatio: "",
            },
          ],
        },
      },
      rules: {
        validateDynamicDate: [
          { validator: validatorDynamicDate, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    SaveConfig() {
      console.log(this.configFrom);
    },
  },
};
</script>