問題描述
在做低代碼平臺的時候遇到個問題，在使用 Element Plus 的 el-form 結(jié)合 el-table 進行動態(tài)行編輯時，如果表單項的 prop 名稱中包含 “.”（例如a.b.c），會導(dǎo)致校驗規(guī)則失效。
Element-Plus el-form 添加/刪除表單項 demo
可以看到 Element-Plus 文檔里面 el-form-item 的 prop 屬性在解析時會將 “.” 視為嵌套對象的訪問符，而實際上你的數(shù)據(jù)結(jié)構(gòu)可能并不是嵌套的，如：a.b.c 本身就是一個完整的字段名。
解決辦法：
使用 "[]" 訪問對象的方式即可，非常簡單！
image.png
我的表格行數(shù)據(jù)是這樣的：
image.png
原理：
let obj= {a: 'xxxx'}
console.log('方式1：', obj.a) // 方式1： xxxx
console.log('方式2：', obj['a']) // 方式2： xxxx
至此，問題解決！
擴展 - el-form 包裹 el-table 來實現(xiàn)行編輯步驟
- 1.如果是el-form 包裹的 el-table 來實現(xiàn)行編輯，那么這里 domains 就是 el-table 的數(shù)據(jù)源 data
image.png
- 2.如果是el-form 包裹的 el-table 來實現(xiàn)行編輯，那每個單元格里的 el-form-item 的 prop 就是 el-table綁定的 ‘el-table 的 data的變量名.’ + 行索引 + 當(dāng)前單元格的校驗字段 ，這里 el-table 的 data的變量名 是 domains ，因此是：
:prop="'domains.' + index + '.value'"
image.png
在校驗時 element-plus 取值是這樣的 ：dynamicValidateForm.domain.0.value 也就是 dynamicValidateForm.domain 的第 0 行的 value 字段的值
來都來了，點個贊吧！
