微信小程序实现点击按钮新增或删除数组对象一行数据，以及判断新增一行数据该数组是否已经存在

1.效果图

2.静态页面wxml

<view class="addbox">
         <view class='add-li' bindtap='addList' >增加</view>
    </view>
   <view class="rank">
      <view style="width:100%;">
         <view style="float:left;width:30%;font-size:32rpx;font-weight:bold;color:black;">  
           获奖等级
        </view>
      <view style="float:left;width:35%;font-size:32rpx;font-weight:bold;color:black;">
           奖品
      </view>
      <view style="float:left;width:15%;font-size:32rpx;font-weight:bold;color:black;">
           份数 
      </view>
      <view style="float:left;width:20%;font-size:32rpx;font-weight:bold;color:black;text-align:center;">
           操作
      </view>
      </view>
      <view  wx:for="{{lists}}" wx:key="{{index}}" style="width:100%;">
      <view style="float:left;width:30%;font-size:30rpx">  
         <input  data-id="{{item.rank}}" data-index="{{index}}"  value='{{item.rankName}}' placeholder="获奖等级"  bindtap='changeRankFn'></input>
      </view>
      <view style="float:left;width:35%;font-size:30rpx">
         <input class='create-li' data-id="{{item.reward}}" data-index="{{index}}"  value='{{item.reward}}' placeholder="请输入奖品"  bindblur='bindRewrdInput' ></input>
      </view>
      <view style="float:left;width:15%;font-size:30rpx">
          <input class='create-li' data-id="{{item.num}}"  data-index="{{index}}" value='{{item.num}}' placeholder="份数"  bindblur='bindNumInput'></input>
      </view>
      <view style="float:left;width:20%">
          <view class='del-li' data-index="{{index}}" bindtap='delList' >删除</view>
      </view>
      </view>
   </view> 
   

3.css样式

.addbox{
height:80rpx;
width:90%;
background:blue;
text-align:center;
margin:5rpx auto
}
.rank{
  padding: 35rpx;
  font-size: 14px;
  color: #919191;
  margin-bottom:200rpx;
}
.add-li{
font-size:35rpx;
width:100%;
height:80rpx;
line-height:80rpx
}
.del-li{
font-size:12px;
background:green;
width:50px;
height:15px;
text-align:center;
color:white;
}

4.js页面

Page({
data: {
    lists:[
      {
       "rank":"",
       "rankName":"",
       "reward":"",
       "num":0
      },
    ],
  },
  addList: function(){
    var  lists = this.data.lists;
    var newData = {
       "rank":"",
       "rankName":"",
       "reward":"",
       "num":0
    };
    lists.push(newData);//实质是添加lists数组内容，使for循环多一次
    this.setData({
      lists: lists,
    })  
  },
  delList: function (e) {
    var lists = this.data.lists;
    let index = e.currentTarget.dataset.index  // 获取数据的索引
    lists.splice(index,1)
    //lists.pop();      //实质是删除lists数组内容，使for循环少一次
    this.setData({
      lists: lists,
    })
  }, 
  bindRewrdInput:function(e){
    let that = this
    var val = e.detail.value;
    let index = e.currentTarget.dataset.index  // 获取数据的索引
    let reward = 'lists[' + index +'].reward'  // 获取lists[index].reward
   // var lists = that.data.lists;
    that.setData({
      [reward]:val
     })
     //console.log(lists)
  },
  bindNumInput:function(e){
    let that = this
    var val = e.detail.value;
    let index = e.currentTarget.dataset.index  // 获取数据的索引
    let num = 'lists[' + index +'].num'  // 获取lists[index].num
   // var lists = that.data.lists;
    that.setData({
      [num]:val
     })
     //console.log(lists)
  },
//修改开奖条件
changeRankFn: function(e) {
  let that = this
  let id = e.currentTarget.dataset.id // 获取传入的id
  let index = e.currentTarget.dataset.index  // 获取数据的索引
 // console.log(index)
  let rank = 'lists[' + index +'].rank'  // 获取lists[index].rank
  let rankName = 'lists[' + index +'].rankName'
  var lists = that.data.lists;

    wx.showActionSheet({
      itemList: ['特等奖', '一等奖','二等奖','三等奖'],
      success(res) {
        console.log(res.tapIndex)
        if (res.tapIndex === 0) {
          //判断数据是否已经存在  
           var flag1=0; 
           lists.forEach(item=>{
             console.log(item.rank)
             if(item.rank=='1'){
               flag1++;
              }
           })        
          if(flag1==0){
            that.setData({
              [rank]:"1",
              [rankName]:"特等奖",
             })
          }else{
            wx.showToast({
              title: '已添加特等奖',
              image: '/img/cuowu.png',
              duration: 1200
            })
          }     
        } else if (res.tapIndex === 1) {
           //判断数据是否已经存在  
           var flag2=0; 
           lists.forEach(item=>{
             console.log(item.rank)
             if(item.rank=='2'){
               flag2++;
              }
           })        
          if(flag2==0){
            that.setData({
              [rank]:"2",
              [rankName]:"一等奖",
            })
          }else{
            wx.showToast({
              title: '已添加一等奖',
              image: '/img/cuowu.png',
              duration: 1200
            })
          }      
        }else if (res.tapIndex === 2) {
          var flag3=0; 
           lists.forEach(item=>{
             console.log(item.rank)
             if(item.rank=='3'){
               flag3++;
              }
           })        
          if(flag3==0){
            that.setData({
              [rank]:"3",
              [rankName]:"二等奖",
            })
          }else{
            wx.showToast({
              title: '已添加二等奖',
              image: '/img/cuowu.png',
              duration: 1200
            })
        }
        }else if (res.tapIndex === 3) {
           //判断数据是否已经存在  
           var flag4=0; 
           lists.forEach(item=>{
             console.log(item.rank)
             if(item.rank=='4'){
               flag4++;
              }
           })        
          if(flag4==0){
            that.setData({
              [rank]:"4",
              [rankName]:"三等奖",
            })
          }else{
            wx.showToast({
              title: '已添加三等奖',
              image: '/img/cuowu.png',
              duration: 1200
            })
        } 
      }
        console.log(lists)
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })
  )
  }
},
})