小程序全选以及批量删除数组对象

<view>
<view onTap="del">
   <button  class="btn">删除</button>
</view>
  <view  onTap="aa">
    <am-icon type="{
    
    {
    
    allselect}}" color="red" size="42rpx;"/>
   <view>
   全选
 </view>
 </view>
 <block a:for="{
    
    {
    
    bb}}">
 <view  onTap="bb" data-index="{
    
    {
    
    index}}" style="display:flex">
    <am-icon 
    type="{
    
    {
    
    item.select}}" 
    data-index="{
    
    {
    
    index}}" 
    data-select="{
    
    {
    
    item.select}}"
    color="red"
    size="42rpx;"/>
    <view>
      {
    
    {
    
    item.name}}
    </view>
    <view style="margin-left:30rpx">
      {
    
    {
    
    item.text}}
    </view>
 </view>
 <block>
</view>
 
 
Page({
    
    
data:{
    
    
  bb:[
      {
    
    
      select:"circle",
      name:"单选",
      text:"德玛西亚"
      },
       {
    
    
      select:"circle",
      name:"单选",
       text:"艾欧尼亚"
      },
      {
    
    
      select:"circle",
      name:"单选",
       text:"诺克萨斯"
      },
       {
    
    
      select:"circle",
      name:"单选",
       text:"恕瑞玛"
      },
  ],
     allselect:"circle",
     
  },
  //批量删除
  del(){
    
    
      console.log(this)
      //全选删除
      if(this.data.allselect=="selected")return this.setData({
    
    bb:''})
      //批量删除
      let newArr=[]
      newArr=this.data.bb.filter(item=>{
    
    
        return item.select==="circle"
      })
       this.setData({
    
    
      bb: newArr
    });
  },
  bb(e){
    
    
    
    var index=e.target.dataset.index
    var select=this.data.bb[index].select
    // console.log(select)
    // console.log(this)
    // console.log(e)
    if(select =="circle"){
    
    
      type="selected"
           var type="selected"
    }else{
    
    
       type="circle"
       var type="circle"
    }
    var newList=this.data.bb
     newList[index].select = type
    this.setData({
    
    
       bb:newList
    })

    // console.log(this.data.bb);
  let result=  !newList.some(item=>{
    
    
     return item.select==='circle'
    })
    // console.log();
    
      this.setData({
    
    
        allselect:result?'selected':'circle'
      })
    
  },
  //全选
aa(e){
    
    
  //  console.log(e)
  //  console.log(this)
   var allselected=this.data.allselect
   var newList=this.data.bb
  //  console.log(allselected)
  //  console.log(newList)
   if(allselected =="circle"){
    
    
     for(var i=0;i<newList.length;i++){
    
    
              newList[i].select="selected"
     }
     var select="selected"
   }else{
    
    
        for(var i=0;i<newList.length;i++){
    
    
          newList[i].select="circle"
        }
        var select="circle"
   }
   this.setData({
    
    
      bb:newList,
      allselect:select
   })
},

});

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_51110842/article/details/115765467