element中form组件prop嵌套属性的问题解决

<template>
  <div id="app">
    <el-form label-width="100px" :model="ruleForm" :rules="rules">

      <el-form-item
        v-for="(item, index) in tableData"
        :key="item.id"
        :prop="'tableData.' + index + '.name'"
        :rules="rules.name"
      >
        <el-input v-model="item.name"></el-input>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      ruleForm: {
        name: ''
      },
      tableData: [
        { id: 1, name: "" },
        { id: 2, name: "" },
      ],
      rules: {
        name: [
          {
            required: true,
            message: "请输入活动名称",
            trigger: "blur",
            validator(rule, value, callback) {
              console.log("rule: ", rule);
              console.log("value: ", value);
            },
          },
        ],
      },
    };
  },
};
</script>

mounted() {
  if (this.prop) {
    this.dispatch('ElForm', 'el.form.addField', [this]); // 这一步不用管

    let initialValue = this.fieldValue; // 取得fieldvalue
    // 判断fieldvalue是不是数组, 如果是数组则合并
    if (Array.isArray(initialValue)) {
      initialValue = [].concat(initialValue);
    }
    // 给this定义一个initialValue属性
    Object.defineProperty(this, 'initialValue', {
      value: initialValue
    });

    this.addValidateEvents();
  }
}

  computed: {
      fieldValue() {
        // 1.拿到当前"form"的model属性(这里很重要, 要记住这一步)
        const model = this.form.model;
        if (!model || !this.prop) { return; }

        // 2.拿到当前"form-item"的prop属性, 
        // 也就是我们传的那个:prop="'tableData.' + index + '.name'"
        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }
        // 3.将model和path传给了getPropByPath方法
        return getPropByPath(model, path, true).v;
      }  
  }

function getValue(obj, path) {
 ...
}

const obj = { a: { b: { c: '1' } } }

getValue(obj, 'a.b.c'); // 1