el-checkbox를 사용하여 모두 선택하는 방법(코드)

이 글의 내용은 el-checkbox를 사용하여 전체 선택(코드)을 달성하는 것에 관한 것입니다. 이는 특정 참조 값을 가지고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

최근 회사에서 일괄 추가, 전체 선택, 즐겨찾기 책 삭제 요청을 받았습니다
구현 아이디어: 전체 선택을 클릭하여 항목의 체크 항목을 변경하고, 항목의 체크 항목을 변경하고, 체크 항목을 다시 편리하게 합니다. 모든 항목을 선택하여 모두 selectAll

1) 이 컴포넌트의 기본 기능을 구현했습니다. 체크박스는 vant-ui를 사용합니다. 공식 홈페이지에는 해당 기능이 포함된 데모가 없기 때문에 위의 방법으로 구현했습니다. 아이디어는 있지만 변경 이벤트만 있어서 모든 기능을 구현하기 어렵다는 점이 문제입니다. 체크된 항목을 변경하도록 선택하면 해당 항목의 변경도 동시에 실행됩니다. 항목의 모든 선택 사항이 변경될 때 이벤트가 트리거되어 무한 루프가 생성됩니다.

2) 변경 이벤트를 대체하려면 기본 클릭을 사용하세요

3) el -checkbox를 사용하세요. 다행스럽게도 프로젝트에서도 element-ui를 사용합니다. 구현 계획을 확인했지만 그 값에 대해 약간의 의문이 있습니다
참고: el-checked로 바인딩된 데이터는 처음부터 데이터에 있어야 하며 나중에 추가할 수 없으므로 가끔 클릭이 실패합니다. 하하하~ ~

<el-checkbox v-model="selectAll" @change="selectAllFunc"></el-checkbox>
<el-checkbox  v-model="item.checked" @change="selectProduct"></el-checkbox>
selectProduct(val) {
  for(let i = 0,len = this.collectionlist.length;i < len;i ++){
    if(!this.collectionlist[i].checked){
      this.selectAll = false;
      return false;
    }
  }
  this.selectAll = true;
}
selectAllFunc(val){
  this.collectionlist.map((item,i)=>{
    item.checked = val;
  })
}

위 내용은 el-checkbox를 사용하여 모두 선택하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!