elementui动态生成el-tab-pane下动态校验tab下的from表单，公用一套校验规则并互不影响；循环生成的表单进行表单校验

代码部分

<!---HTML部分---->
<el-tabs v-model="editableTabsValue" type="card">
            <el-tab-pane :key="index" v-for="(item, index) in editableTabs"
              :label="item.title" :name="String(index)">
            <el-form :model="item" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动区域" prop="region">
                    <el-input v-model="item.region"></el-input>
                </el-form-item>
                <el-form-item label="name" prop="name">
                    <el-input v-model="item.name"></el-input>
                </el-form-item>
            </el-form>
            </el-tab-pane>
          </el-tabs>
          <button @click="sumbit">提交</button>
          // js部分
          data: function(){
                return {
                    editableTabsValue: '0',
                    editableTabs: [
                        { title: 'Tab 1',name: '1',region: '1 content'},
                        {title: 'Tab 2', name: '2',region: '2 content'}
                    ],
                    ruleForm: {
                        name: '',
                        region: '',
                    },
                    rules: {
                        name: [
                            { required: true, message: '请输入活动名称', trigger: 'blur' },
                        ],
                        region: [
                            { required: true, message: '请选择活动区域', trigger: 'blur' }
                        ],
                    }
                }
            },
        methods:{
                sumbit() {
                    let arr = this.editableTabs;//我是需要校验的表单集合
                    for (let i = 0; i <arr.length; i++) {
                            let a = arr[i];
                            // 根据ref的值并对应下标，去校验每一个form表单
                            console.info('this.$refs', this.$refs['ruleForm'][i]);
                            this.$refs['ruleForm'][i].validate((valid) => {
                            // i下的表单通过的话set健值对用于区分是否通过校验
                            if (!valid) {
                                console.error('第'+ i + '个未通过');
                                this.$set(a, 'valid', false)
                            } else {
                                this.$set(a, 'valid', true)
                            }
                            });
                        }
                        //遍历数组的每一项form都为true时才能进行下一步操作
                        let flag = this.editableTabs.every(item => {
                            return item.valid === true
                        })
                        console.info('flag',flag);
                        if (flag) {//全部通过校验
                            // 逻辑操作
                        } else {//有表单未通过校验
                            // 逻辑操作
                        }
                }
            }

效果图：