element表格嵌套表单进行验证

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

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

查element找到了需要的代码。

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

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

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

HTML代码：

<el-table-column prop="returnType" label="归还方式" align='center' width="150">
                <template slot-scope="scope">
                    <el-form-item :prop="'FC_ReturnEquipmentList.'+scope.$index+'.returnType'" label-width="0px" :rules='formContentRules.returnType'>
                        <el-select size="mini" placeholder="归还方式" v-model="scope.row.returnType" >
                            <el-option v-for="item in returnTypeBox"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column prop="expressage" label="快递公司" align='center' width="180">
                <template slot-scope="scope">
                    <el-form-item :prop="'FC_ReturnEquipmentList.'+scope.$index+'.expressage'" label-width="0px" :rules='formContentRules.expressage' v-if="scope.row.returnType=='postSend'">
                        <el-input v-model="scope.row.expressage" placeholder="快递公司" size="mini"></el-input>
                    </el-form-item>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column prop="expressageNum" label="快递单号" align='center' width="180">
                <template slot-scope="scope">
                    <el-form-item :prop="'FC_ReturnEquipmentList.'+scope.$index+'.expressageNum'" label-width="0px" :rules='formContentRules.expressageNum' v-if="scope.row.returnType=='postSend'">
                        <el-input v-model="scope.row.expressageNum" placeholder="快递单号" size="mini" ></el-input>
                    </el-form-item>
                    <span v-else></span>

                </template>
            </el-table-column>

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上了，它在<el-form-item></el-form-item>这个标签上。所以之后再写span空标签的时候，千万不要套在<el-form-item></el-form-item>这个里面就可以！