element plus表格嵌套表单校验绑定prop的问题

参考：Vue3 element-plus表单嵌套表格实现动态表单验证_何极光的博客-CSDN博客

也不能说表格里嵌套表单吧…虽然页面形式是表格里嵌套的表单，但其实数据结构还是表格数据tableData在表单数据form里

const form = reactive({tableData:[{}]})

说回表单校验prop的问题，

看了一下参考文章的大致思路就兴冲冲自己去写了，结果。。

给el-form-item绑定prop必须这么写

:prop="`tableData.${$index}.type`"

而不能这么写

:prop="tableData[$index].type"

会报tableData未定义的错误。为什么呢？同样是访问数组中的元素的方法呀？

可以页面打印一下tableData，发现它的类型typeof一下并不是数组，而是对象。

也不能使用 :prop="form.tableData[$index].type" 去访问，语法是正确的（eslint不报错），但实际上访问不到，即表格第一行绑定的不是第一行，第二行绑定的不是第二行，不清楚它绑定的啥，但可以确定的是，它绑定的是一个固定的值，不能根据index变化

我明白了：

探索过程是在页面上打印一下：

使用tableData.${$index}.type访问：

使用form.tableData[$index].type访问：

非常直观。

第一种访问方式和第二种访问方式的目标在根本上是不同的

第一种访问方式访问的是索引/字段名，

第二种访问方式访问的是值，

（键值对）

prop绑定的应该是那个特殊的索引啊！我完全明白了。

这样做的前提是，可以这么访问，毕竟，tableData.${$index}.type也太奇怪了吧！数组.0.type？好奇怪啊

好在它不是数组，而是对象——为什么它是对象？

其实它不是对象，即使你用typeof去判断类型返回了object。

事实上，它是一个对象数组 Object[]

它是一个包含对象的数组，并且每个对象中都有type这个属性，所以可以使用这种语法tableData.${$index}.type