VUE中form表单里面嵌套table并且实现每一个单元格都有input框校验

最近项目需求要求form表单中有一项“主要领导成员”和“联系人”(他们的输入格式一致)而且领导人至少输入一位,最多输入两位位,效果图如下
在这里插入图片描述

校验效果如下

在这里插入图片描述

最外面的红框是为了用户醒目我自己用两div封装的,直接贴代码

methods: {
            //每次输入完一个input后失去光标后检验这一项
            upperCase(){
                this.checkMemFun();
            },
            //判断主要领导和联系人数据是否已经填写
            checkMemFun() {
                let index = 0,obj = this.model.list[0]
                console.log("JSON.stringify(this.model.list[0])==="+JSON.stringify(obj))
                if (JSON.stringify(obj) === '{}') {
                    index++
                } else {
                    if ((Object.getOwnPropertyNames(obj)).length < 5) {
                        index++
                    } else {
                        for(let name in obj){
                            if ( obj[name] == '') {
                                index++
                            }
                        }
                        
                    }
                }
                if (index == 0) {
                    this.mainMemLabel = false
                } else {
                    this.mainMemLabel = true
                }
            },
            //主要领导和联系人数据拼接给form
            contactMyNum() {
                for (let i = 0; i < 3; i++) {
                    this.form['name' + (i + 1)] = this.model.list[i]['name']
                    this.form['title' + (i + 1)] = this.model.list[i]['title']
                    this.form['telephone' + (i + 1)] = this.model.list[i]['telephone']
                    this.form['email' + (i + 1)] = this.model.list[i]['email']
                    this.form['phone' + (i + 1)] = this.model.list[i]['phone']
                }
            },
            submitForm(form) {
                //console.log(this.$route)
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.checkMemFun();
                        if (this.mainMemLabel) {
                            return false
                        } else {
                            if (this.form.businessLicense.split(',').length != 0) {
                                this.form.status = 1
                                this.contactMyNum();
                                this.promptMessage();
                            } else {
                                this.$refs.image.validate();
                            }
                        }
                    } else {
                        this.checkMemFun();
                        return false
                    }
                });
            },
       

###### HTML代码如下

            <el-form-item prop="mainMembers" class="mainMembers" style="position: relative">
                <span class="nameLable posit">主要领导成员</span>
                <div :class="mainMemLabel == true ? 'redBox' : ''"></div>
                <div :class="mainMemLabel == true ? 'rightBox' : ''" class=""></div>
                <el-form :model="model" ref="form">
                    
                    <el-table :data="model.list" row-key="key" id="checkTable" style="width: 60%">
                        <el-table-column
                                v-for="item in tableHeadData"
                                :key="item.key"
                                :label="item.label"
                                :width="item.width">
                            <template slot-scope="scope">
                               
                                <el-form-item
                                        :prop="'list.' + scope.$index + '.'+item.name"
                                        :rules="rules1[item.name]">
                                    <el-input v-model="scope.row[item.name]" :disabled="disabLabel"  @blur="upperCase"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
                <span class="nameLable2">联系人</span>
            </el-form-item>
Logo

前往低代码交流专区

更多推荐