Element UI表单校验之动态表单校验的坑

为了提高自己，将自己在实践过程中遇到的坎儿记录一下，积累经验！！！有不妥当的地方，希望大佬们可以指点一二，感激不尽！！！！！！

<template>
    <!--    这里总结的是关于element UI 表单校验中遇到的案例-->
    <el-form :model="formData" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
             label-position="left">
        <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入内容" clearable></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
            <el-select v-model="formData.type" placeholder="请选择类型" clearable @change="changeType">
                <el-option v-for="item in selectForm" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="部署模式" prop="model">
            <el-input v-model="formData.model" placehoder="请输入模式" clearable></el-input>
        </el-form-item>
        <el-button type="primary" @click="addLineForm">点击增加一行</el-button>
        <el-form :inline="true" :model="item" :rules="rules" class="demo-form-inline"
                 v-for="(item,index) in formList" :key="index" ref="addForm">
            <el-form-item label="IP" prop="IP">
                <el-input v-model="item.IP" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role">
                <el-input v-model="item.role" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="端口" prop="port">
                <el-input v-model="item.port" placeholder="请输入"></el-input>
            </el-form-item>
            <!--            删除按钮-->
            <el-button type="danger" icon="el-icon-delete" @click="delLineForm(index)"></el-button>

        </el-form>
        <!--        提交按钮-->
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm','addForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm','addForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "formBug",
        data() {
            return {
                formData: {
                    name: '',
                    type: '',
                    model: ''
                },
                selectForm: [
                    {label: '周一', id: '1'},
                    {label: '周二', id: '2'}
                ],
                formList: [
                    {
                        IP: '',
                        role: '',
                        port: ''
                    },
                ],
                rules: {
                    name: [{required: true, message: '请输入活动名称', trigger: 'blur'}],
                    type: [{required: true, message: '请输入活动类型', trigger: 'blur'}],
                    model: [{required: true, message: '请输入活动模式', trigger: 'blur'}],
                    IP: [{required: true, message: '请输入Ip', trigger: 'blur'}],
                    role: [{required: true, message: '请输入角色', trigger: 'blur'}],
                    port: [{required: true, message: '请输入端口', trigger: 'blur'}],
                }
            }
        },
        methods: {
            //选择类型变化时触发,实现选择类型以后，其他表单必填验证就消失的效果
            changeType(){
                this.$refs["ruleForm"].clearValidate();
                this.$refs["addForm"].forEach(item=>{
                    item.clearValidate()
                })
            },
            //增加一行表单
            addLineForm() {
                this.formList.push(
                    {
                        Ip: '',
                        role: '',
                        port: ''
                    }
                )
            },
            //删除一行表单
            delLineForm(index) {
                this.formList.splice(index, 1)
            },
            submitForm() {
                console.log(this.$refs['addForm'])
                this.$refs['ruleForm'].validate((valid) => {
                    this.$refs['addForm'].forEach(item => {
                        let length = this.formList.length;
                        let num = 0
                        item.validate(valid1 => {
                            if (valid1) {
                                num++
                            }
                        })
                        if (num === length && valid) {
                            console.log('成功')
                        }
                    })
                });
            },
            resetForm(formName,addform) {
                this.$refs[formName].resetFields();
                this.$refs[addform].forEach(item=>{
                    item.resetFields()
                })
            }
        },
        created() {
            // console.log(this.$refs[formName])

        }
    }
</script>

<style scoped>

</style>```