vue project 작업물.gif
in WORKS
20년이 된 레거시를 수정,개편하는것보다
신기술을 이용해 새로 만드는게 더 빠르고 낫다고 판단되어 시작된 프로젝트
back은 classic ASP, front는 vue.js를 이용해 만들었다
컴포넌트의 td를 클릭하면 형제 컴포넌트의 내용이 바뀜
각 상황에 맞는 모달을 띄움
자식컴포넌트인 모달과 부모 컴포넌트간의 통신(event,props)
- 실시간으로 자식 컴포넌트에 작성한 내용이 부모컴포넌트에도 작성됨(event)
SPA답게 페이지가 이동할때마다 새로고침 되지 않음
반응형 rowspan, 반응형 colspan을 적용
데이터로 받아온 변수만큼 rowspan을 해야하므로
:rowspan
:colspan
을 이용해서 데이터의 소수 첫번째 자리 수를 묶어 rowspan해줌 (ex. 100.1000, 100.1234, 100.1456, 100.1586, 100.1685, 100.1892, 100.2142, 100.2548, 100.3452 이 있으면 100으로 9개를 rowspan으로 묶고, 100.1로 6개를 묶고, 100.2로 2개를 묶고, 100.3으로 1개를 묶는다. 순전히 데이터값이 어떠냐에 따라 달라짐)
- 행 갯수가 많아지면 急스크롤시 blank현상이 일어나서 bar를 만들어 공통 기준으로 묶음