element表格嵌套表单进行验证

拿到需求是表格需要能动态增加，然后又根据归还方式不同，如果是邮寄方式，后面快递信息都是必填。如果不是邮寄方式，那后面数据就不用填。先把效果展示出来

需要进行每一项表单里面的数据进行验证！

查element找到了需要的代码。

我挑重要的说。因为是动态的，所以prop绑定的时候需要不能唯一，就是动态数据。官方写法

:prop="'domains.' + index + '.value'"

其实主要就是这个了。然后添加验证规则就行。我直接附上代码记录一下

HTML代码：

JS代码：

data(){
    return{
        returnTypeBox: [{ value: 'postSend', label: '邮寄方式' }, { value: 'theReturn',     label: '现场归还' }],
        //校验规则
        formContentRules: {
           expressageNum: [{ required: true, message: '请填写', trigger: 'blur' }],
           expressage: [{ required: true, message: '请填写', trigger: 'change' }],
        },
    }
}

这样就行了，没什么难度。

这里说一下验证的样式不消失的问题（算个踩坑？）：

首先说明一下官方的重置方式：

说一下2种方式，大的表单全部重置：this.$refs[formName].resetFields();小的局部的表单样式进行重置：this.$refs.xxx.clearValidate()。

说第二种情况，就是我之后不需要验证了，不需要再填写了，直接用span空标签展示的情况，这个时候可能出现上一次验证的表单样式不消失的问题。原因很简单，我们F12打开控制台就能看到这个样式是在哪个div上了，它在这个标签上。所以之后再写span空标签的时候，千万不要套在这个里面就可以！