1. 무한한 깊이(depth)의 체크 박스 구현[그림 1]과 같이 무한한 깊이의 체크 박스를 구현할 필요가 있었다. 목차에 사용되는 데이터는 category 배열인데 이 배열의 요소는 객체이다. 이 객체 하나가 체크 박스 하나를 구성한다. 객체는 subcategory를 가지고 있어서 이를 통해 무한한 깊이의 목차를 만들 수 있다. 구현하고자 하는 기능은 다음과 같다.부모와 자식 체크 박스를 렌더링 할 때 시각적으로 구분이 가능하도록 margin-left 값을 자동으로 부여해야 한다.부모 체크 박스를 체크/해제하면 자식 체크 박스도 부모와 동일하게 체크/해제되어야 한다.자식 체크 박스를 체크/해제할 때는 부모 체크 박스에 영향을 주지 않아야 한다. 2. 구현 코드위 기능을 구현함에 있어 중요한 포인트는 재..

| 구현 기능 목록 및 진행 현황 ☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회 ☑ 조회한 정보 수정 기능 ☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능 □ 조회 정보 페이징 □ Packing List 생성, 출력, xlsx 내보내기(모달) □ 스타일 작업(Bootstrap) | 문제와 해결 data() { return { customers: [ { code: '001-00-00000', company: 'A사' }, { code: '002-00-00000', company: 'B사' }, { code: '003-00-00000', company: 'C사' } ], 위와 같이 customers 배열 안에 고객사 정보를 객체로 넣어 두었다. customers 배열의 요소(..

checkbox, radio button 적용 19차시 #6에서 작성한 코드에 checkbox(또는 radio button)를 추가하였다. 아래의 코드는 자식 component의 checkbox에 체크된 정보를 부모 component에서는 알지 못하는 상태이다. 부모 component에서 체크된 내용을 알 수 있어야 삭제, 수정 등의 기능을 적용할 수 있다. 부모 component 조회 자식 component {{ th.title }} {{ item[th.key] }} custom event 적용 부모 component 부모 component인 listView.vue의 simple-grid에 커스텀 이벤트 @change-item를 작성한다. 이 이벤트는 changeCheckedValue 함수를 호출하도록..