问题描述
在做低代码平台的时候遇到个问题，在使用 Element Plus 的 el-form 结合 el-table 进行动态行编辑时，如果表单项的 prop 名称中包含 “.”（例如a.b.c），会导致校验规则失效。
Element-Plus el-form 添加/删除表单项 demo
可以看到 Element-Plus 文档里面 el-form-item 的 prop 属性在解析时会将 “.” 视为嵌套对象的访问符，而实际上你的数据结构可能并不是嵌套的，如：a.b.c 本身就是一个完整的字段名。
解决办法：
使用 "[]" 访问对象的方式即可，非常简单！
image.png
我的表格行数据是这样的：
image.png
原理：
let obj= {a: 'xxxx'}
console.log('方式1：', obj.a) // 方式1： xxxx
console.log('方式2：', obj['a']) // 方式2： xxxx
至此，问题解决！
扩展 - el-form 包裹 el-table 来实现行编辑步骤
- 1.如果是el-form 包裹的 el-table 来实现行编辑，那么这里 domains 就是 el-table 的数据源 data
image.png
- 2.如果是el-form 包裹的 el-table 来实现行编辑，那每个单元格里的 el-form-item 的 prop 就是 el-table绑定的 ‘el-table 的 data的变量名.’ + 行索引 + 当前单元格的校验字段 ，这里 el-table 的 data的变量名 是 domains ，因此是：
:prop="'domains.' + index + '.value'"
image.png
在校验时 element-plus 取值是这样的 ：dynamicValidateForm.domain.0.value 也就是 dynamicValidateForm.domain 的第 0 行的 value 字段的值
来都来了，点个赞吧！
