需求:选择下拉框中的值,点击 添加 按钮,将选中的值push到表格数组中,进行页面渲染,选择的重复值要去除掉
页面效果:
在这里插入图片描述

再次选择 7 & 8 要提示已经存在
在这里插入图片描述
出现问题第一次 第二次添加都没有问题,第三次之后,添加数据都会出现重复添加的现象
在这里插入图片描述
修改之前代码:
逻辑:首先判断表格数组是否有值,没有值正常进行push,有值进行重复值筛选,如果已经存在不再push,反之,正常赋值

  // 添加
            handleAdd(){
                let that=this  
                if(that.reelNameList.length>0){
                    that.reelNameList.map(item=>{
                        if(item.size==that.sizeValue&&item.thick==that.thickValue){
                            exist = true;
                            that.$message({
                            message:'已经存在了~',
                            type: 'error'
                      });
                }else{
                    that.reelNameList.push({size:that.sizeValue,thick:that.thickValue})
                }
             })
                  
                 }else{
                    console.log('数组小于0')
                    that.reelNameList.push({size:that.sizeValue,thick:that.thickValue})
                }       
            },

导致问题出现的原因:是因为在map循环里进行了else判断,导致会一直循环添加

修改后代码:
增加一个值进行判断
在这里插入图片描述

 // 添加
            handleAdd(){
                let that=this  
                if(that.reelNameList.length>0){
                   let exist = false;//判断是否存在
                    that.reelNameList.map(item=>{
                        if(item.size==that.sizeValue&&item.thick==that.thickValue){
                            exist = true;
                            that.$message({
                            message:'已经存在了~',
                            type: 'error'
                      });
                }
                    })
                    if(!exist){
                        that.reelNameList.push({size:this.sizeValue,thick:this.thickValue})
                    }
                 }else{
                    console.log('数组小于0')
                    that.reelNameList.push({size:that.sizeValue,thick:that.thickValue})
                }       
            },

完整代码

 <div class="both-btn">
                    <el-select v-model="sizeValue" clearable placeholder="请选择尺寸" @change="toQuerySize">
                        <el-option v-for="item in sizeOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="thickValue" clearable placeholder="请选择类型" @change="toQuery">
                        <el-option v-for="item in thickOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <div>
                        <el-button size="small" round style="background-color:#00558C" @click="handleAdd()">添加
                        </el-button>
                    </div>

                </div>
                

data中定义

 sizeOptions:[],//尺寸下拉框
 sizeValue:'',
 thickValue:'',
 thickOptions:[],//厚度下拉框
 reelNameList: [],
   // 添加
            handleAdd(){
                let that=this  
                if(that.reelNameList.length>0){
                   let exist = false;//判断是否存在
                    that.reelNameList.map(item=>{
                        if(item.size==that.sizeValue&&item.thick==that.thickValue){
                            exist = true;
                            that.$message({
                            message:'已经存在了~',
                            type: 'error'
                      });
                }
                    })
                    if(!exist){
                        that.reelNameList.push({size:this.sizeValue,thick:this.thickValue})
                    }
                 }else{
                    console.log('数组小于0')
                    that.reelNameList.push({size:that.sizeValue,thick:that.thickValue})
                }       
            },
Logo

前往低代码交流专区

更多推荐