vue+element+Java 일괄 삭제 기능 구현

표 의 주요 코드 세그먼트
주요 방법 은:@selection-change="selsChange

<el-table ref="singleTable" v-loading="loading" :data="tableData" stripe @selection-change="selsChange">
 <el-table-column type="selection" width="55" ></el-table-column> //   
 <el-table-column label="#" type="index" width="60"></el-table-column> //id
</el-table>

디 스 플레이 값 정의

 data(){
   return{
    sels: [],//      
   }
  }

선택 반전

selsChange(sels) {
  this.sels = sels 
},

일괄 삭제 단추   disabled 설정 사용 가능 여부

 <el-button @click="deleteAll(sels)" :disabled="this.sels.length === 0">     </el-button>

귀속 사 견

deleteAll() {
    var ids= this.sels.map(item => item.id).join()//        id      ，     
    console.log(ids)
    this.$confirm('                ,     ?', '  ', {
     confirmButtonText: '  ',
     cancelButtonText: '  ',
     type: 'warning'
    }).then(() => {   
     axios.post("/****/****/deleteAll",{ids:ids}).then(resp=>{ 
      //              ，callback                 ，      
      if (resp.data.status == 200){
      this.$alter(resp.data.message,'',{ 
        confirmButtonText: "  ",
        callback:action=>{     
        _this.searchClick(),
        }
       }
      }
     } 
     })
    })
   }

백그라운드 분석

@RequestMapper("deleteAll")
public void delete(@RequestBody Map<String,Objetc> params){
 //       id   
 String ids = params.get("ids").toString();
 //          ，     id， mapper   mybatis                 id    
 String[] id = ids.split(",");
 //          ，  service   ，     
}

총결산
위 에서 말 한 것 은 소 편 이 소개 한 vue+element+자바 가 대량 삭제 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!