Skip to content
文章目录

element-plus可编辑行表格删除行与行验证问题

问题

  1. 不给el-form-itemkey, 删除行,会导致所有行验证信息都停留在原本的行号位置
  2. el-form-item加上key之后, 删除行,会导致从当前行开始到最后一行,所有的行验证信息都被清除

补充描述:

官方表单文档中,有个数组添加删除的示例,他是由加 key 的,且添加/删除行之后的行验证信息也是正常的。将官方示例代码中的 key 删除,也有一样的问题,但官方示例,没有和 el-table 结合使用

暂时想到的解决办法:

给行数据加个非必填字段如: _valid, 当有对行进行验证时,将行验证结果赋值给这个字段,那么就能通过这个字段分辨出,哪些行进行过验证,哪些行没进行过验证,以及哪些是进行过验证,但属于验证未通过的。

删除行之后,从当前行开始对所有行未通过验证的行再执行一次验证

该解决方案的一点点小缺陷:如果某行有多个字段都有校验规则,但在删除行之前,实际只触发了部分字段的校验,按照上述的解决方案,会导致,那些未进行过校验的字段,也执行一次校验

其他可行的解决方案:

既然官方 el-form 示例中没有使用 el-table 的数组删除/添加的校验结果符合预期,那也就是说问题出在与 el-table 结合上,那不用 el-table 应该就没这种问题。就是说自己写个表格来实现。但工作量有点大

其他不确定的解决方案:

用 VeeValidate 代替 el-form 验证(需要了解 VeeValidate 的使用,且不确定是否可行)

相关文章

elementUI 表单嵌套表格并对每行进行校验(这个有源代码,但有同样的问题)

解决 ElementUI el-table 行内输入验证问题,动态增减行(这个评论中有人讨论了同样的问题)

[Component] el-table 和 el-form 结合实现行编辑和行验证,第二行验证失败,删除第一行,会导致第二行的错误提示信息被清除(这是我向官方提的 bug)

官方示例:添加-删除表单项

VeeValidate 与 Element-Plus 整合