전체선택/해제 함수 구조 분석

const selectAll = async () => {
  if (tableRef.value) {
    if (allSelected.value) {
      tableRef.value.clearSelection() // 선택 해제
    } else {
      tableRef.value.toggleAllSelection() // 전체 선택
    }
  }
}

 

tableRef.value 확인

if (tableRef.value) {

• 이 조건문은 tableRef가 유효한 엘리먼트 참조를 가지고 있는지 확인합니다.
• tableRef는 <el-table> 컴포넌트에 대한 참조로, Element Plus의 ref를 사용하여 테이블의 인스턴스에 접근합니다.

allSelected.value 확인

if (allSelected.value) {
  tableRef.value.clearSelection() // 선택 해제
} else {
  tableRef.value.toggleAllSelection() // 전체 선택
}

allSelected.value는 현재 전체 선택 상태를 나타냅니다.

• true일 경우: 이미 모든 항목이 선택된 상태이므로 선택을 해제합니다.
• false일 경우: 모든 항목을 선택합니다.

 

tableRef.value.clearSelection()

tableRef.value.clearSelection() // 선택 해제

• clearSelection()은 선택된 모든 항목을 해제하는 Element Plus 테이블의 메서드입니다.

 

tableRef.value.toggleAllSelection()

tableRef.value.toggleAllSelection() // 전체 선택

 

• toggleAllSelection()은 모든 항목을 선택하거나 선택을 해제하는 메서드입니다.
• 이 메서드는 현재 선택 상태를 토글(toggle)하여 전체 항목의 상태를 변경합니다.

---

 

• 전체 선택
  • 사용자가 "전체 선택" 버튼을 누르면 toggleAllSelection() 메서드가 호출됩니다.
  • 테이블의 모든 항목이 선택됩니다.
• 전체 해제
  • 모든 항목이 선택된 상태에서 사용자가 "전체 해제"를 클릭하면 clearSelection() 메서드가 호출됩니다.
  • 모든 항목의 선택이 해제됩니다.