vue+element 표 대량 삭제 기능 예시 코드 구현

최근 에 일괄 삭제 기능 을 써 서 많은 구 덩이 를 만 났 습 니 다.이에 기록 합 니 다.

표 의 코드 는 다음 과 같다.

그림 에서 보 듯 이 표 맨 앞 에 체크 상자 가 있 습 니 다.
코드 가 간단 해 요.

 <el-table-column type="selection" width="65"></el-table-column>

삭제 단추 의 코드 는 다음 과 같 습 니 다:

data 의 코드 는 다음 과 같 습 니 다.

 data() {
  return {
   pageSize: 12,
   total: 0,
   pageData: [],
   query: '',
   sort: 'createAt',
   order: 'descending',
   defaultSnap: srcFallback,
   accept: '',
   ws: null,
   sels: [],//      
   disabled:true
  };
 }

표 의 동 영상 데 이 터 는 pagedata 에서 나 온 것 입 니 다.모든 동 영상 은 하나의 대상 입 니 다.대상 의 status 속성 이 waiting 이나 progress 속성 이 있 을 때 이 동 영상 은 코드 를 바 꾸 거나 디 코딩 을 준비 하고 있 습 니 다.삭제 할 수 없습니다.일괄 삭 제 는 선택 한 줄 을 sels 라 는 배열 에 추가 하고 배열 의 모든 대상 의 id 속성 을 하나의 배열 로 구성 하여 백 엔 드 에 보 내 는 것 입 니 다.또한,코드 를 바 꾸 고 있 는 동 영상 은 삭제 할 수 없 으 며,이 때 버튼 도 사용 하지 않 는 상태 입 니 다.
공식 문서,@selection-change="selsChange"체크 상자 에서 변경 사항 을 선택 할 때 발생 하 는 이벤트 입 니 다.
methods 에 방법 을 추가 합 니 다.

selsChange(sels) { 
    //          
    this.sels = sels;
    //             
    for(let element of this.sels){
    //              ,    ,    
     if(element.status == 'waiting'||element.progress){
      this.disabled = true;
      return;
     }
       //                ,    
      this.disabled = false;
    }
  }

요청 을 백 엔 드 에 보 냅 니 다.코드 는 다음 과 같 습 니 다.

  removeBatch(rows){
   var ids = [];
   rows.forEach(element =>{
    ids.push(element.id)
   })
   this.$confirm('           ?','  ').then(() =>{
    $.post('/vod/removeBatch',{
     ids:ids
    }).then(dara =>{
     this.updateData();
    })
   }).catch(()=>{});
  }

전단 은 이미 코드 를 바 꾸 고 있 는 동 영상 을 제 외 했 습 니 다.백 엔 드 는 전단 에서 들 려 오 는 데이터 에 따라 동 영상 을 직접 삭제 할 수 있 습 니까?
답 은 안 됩 니 다.백 엔 드 는 똑 같이 검증 해 야 합 니 다.
아 이 디 어 는 전단 에서 전 달 된 데 이 터 를 받 은 후에 배열 을 두 번 옮 겨 다 니 는 것 이다.첫 번 째 로 코드 를 바 꾸 고 있 는 동 영상 이 발견 되면 이상 을 던 지고 두 번 째 순환 에 들 어가 지 않 으 며 두 번 째 순환 은 id 에 따라 동 영상 을 삭제 하 는 것 이다.
코드 는 다음 과 같다.

r.post('/removeBatch',async(req,res) => {
  var ids = req.body.ids;
  var files = utils.vod.get("files");
  //     ,          ,     ,    
  for(let id of ids){
    var transing = trans.agent.transing[id];
    if(transing){
      throw new Error('           ');
      return;
    }
  }
  //         ,       
  for(let id of ids){
    var files = utils.vod.get("files");
    var row = files.find({id: id}).cloneDeep().value();
    //        ,   
    if(!row) {
      res.sendStatus(200);
      return;
    }
    var dir = path.dirname(row.path);
    var name = path.basename(row.path, path.extname(row.path));
    var transDir = path.resolve(dir, name);
    //     
    if(fs.existsSync(row.path)){
      fs.removeSync(row.path);
    }
    //      
    if(fs.existsSync(transDir)){
      fs.removeSync(transDir);
    }
    //  json    
    files.remove({id: id}).write();
  }
  res.sendStatus(200);
})

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.