vue project 작업물.gif


20년이 된 레거시를 수정,개편하는것보다

신기술을 이용해 새로 만드는게 더 빠르고 낫다고 판단되어 시작된 프로젝트

back은 classic ASP, front는 vue.js를 이용해 만들었다


vuework

컴포넌트의 td를 클릭하면 형제 컴포넌트의 내용이 바뀜




vuework

  1. 각 상황에 맞는 모달을 띄움

  2. 자식컴포넌트인 모달과 부모 컴포넌트간의 통신(event,props)




vuework

  1. 실시간으로 자식 컴포넌트에 작성한 내용이 부모컴포넌트에도 작성됨(event)




vuework

SPA답게 페이지가 이동할때마다 새로고침 되지 않음




vuework

  1. 반응형 rowspan, 반응형 colspan을 적용

  2. 데이터로 받아온 변수만큼 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개를 묶는다. 순전히 데이터값이 어떠냐에 따라 달라짐)




vuework

  1. 행 갯수가 많아지면 急스크롤시 blank현상이 일어나서 bar를 만들어 공통 기준으로 묶음








© 2018. by sora

Powered by sora