【VUE】记录 elementUI form + table 混合验证的问题

最近在写一个混合表单提交，效果如下

此为页面效果的一部分，上部分为普通表单，下部分为table，table 中有文本框，需要验证是否必填，在最后表单提交的时候一并校验

<template>
  <div>
    <el-form ref="form" :model="form" :rules='rules'>
      <el-table  ref="table" :data="form.tableData" empty-text='暂无数据'>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <el-form-item :prop=" 'tableData.' + scope.$index + '.name' " :rules='rules.name'>
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

data(){
	return {
        form: {
            tableData: [
            {
                name: "aaa",
                age: 11
            },
            {
                name: "",
                age: ''
            }
            ]
        },
    	rules: {
	        name: [
	          { required: true, message: '名字不能为空', trigger: 'blur' }
	        ]
	      }
    }
}

重点：注意查看data中form的数据结构，其中tableData为form 的子集，但是在

el-form-item 上绑定的prop 属性，为

:prop=" 'tableData.' + scope.$index + '.name' "

如果将其写为：

 :prop=" 'form.tableData.' + scope.$index + '.name' " 

就会提示 "Error: please transfer a valid prop path to form item!"

的表单验证的错误。