elementUI表单验证踩坑问题怎么解决

本文小编为大家详细介绍“elementUI表单验证踩坑问题怎么解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“elementUI表单验证踩坑问题怎么解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 我总结之后，有四个要注意：这是要操作的列表：第一个问题的解决方案：我们在遍历form-item的时候，就需要prop属性，根据官方文档的说明，prop是表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的。正是这个属性，可以让组件知道触发的时机。其中的触发逻辑没有去深入研究。在rules这里sybkey要和rules的key值对应上才可以正常触发如上述所示，根据list的数量进行遍历行数，再根据item来遍历列数。每一列都有不定数量的key值，那么在这里的我们需要给prop指定到准确的位置，大概模式就是父key.行数.列key，简单地来说，就是要将这个值所在的数据结构位置告诉element组件。根据我的猜测，element表单组件触发验证的逻辑是监听这个值的变化，根据给定的触发条件（change，input，blur，focus等等），符合触发条件就去对比是否发生值的变化，然后根据验证规则去做相应的提示。第二个问题的解决方案：我们在遍历form-item的时候,vue会要求必须有一个key，这样可以正确更新视图。那么这一个key最大的特点是要操持唯一。我的方案是给key值生成一个唯一id，或者new Date().getTime()生成一个时间戳，当我们对列表进行操作的时候，就会正确更新视图了。例如：当我们触发第一和第二的item验证的时候再去删除第二个item，视图就会在删除之后，验证提示会删除如果不是唯一key，例如使用index做key值，那么这个key是不会变化的，删除第二个item就会出现以下情况当发生这种情况的时候，你应该考虑的是vue的视图更新规则第三个问题的解决方案：自定义验证规则在官方文档有详细的说明，这一块就不用细说了，但是里面的触发逻辑需要根据情况来修改代码。例如总数是根据前面的长和高相乘公式得出的，那么我们需要每次在长和高的值变化的时候，就需要去计算总数，然后根据规则去进行提示。设置一个currentIndex，在长和高的输入框组件上定义focus事件，每次触发就说明输入框在操作，这一行就被操作的一行数据，那么在定义验证的时候就知道是哪一行了当然，代码还是要根据具体交互来编写第四个问题的解决方案：很多时候，我们都只是对表层key进行验证，所以如果需要验证对象的深层可以的时候，我们需要做特殊处理，和第一个问题的处理方式类似，但又不完全相同。这里的特点就是需要在rules属性定义一个验证验证规则，prop的值要跟rules的值对应上才可以触发。这里的特点是，对象和对象的可能会有相同的key，所以这样做是可以在rules设置一个唯一的触发key值。读到这里，这篇“elementUI表单验证踩坑问题免费云主机、域名怎么解决”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注云技术行业资讯频道。

相关推荐: Vue中怎么实现替换路由而不切换选项卡

今天小编给大家分享一下Vue中怎么实现替换路由而不切换选项卡的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完免费云主机、域名这篇文章后有所收获，下面我们一起来了解一下吧。 什么是Vue路由系统…