프로그래밍/Vue.js

vuejs handsontable 사용하기 excel table 컴포넌트

p-a-r-k 2018. 5. 14. 15:57
반응형

엑셀컴포넌트를 사용해야해서 jquery와 함께 사용하던 handsontable을 vuejs에 적용하기.


단순히 html페이지에 적용할땐 script태그에 적용시킬 엘리먼트(ex div)를 선언하고 생성자에 던져주었다.


vue-handsontable은 HOT-TABLE이란 컴포넌트로 사용할수가 있었는데, 

data바인딩과 this접근(vue접근과 handsontable접근)이 애매해서 컴포넌트식이아닌 기존 형태로 개발했다..


vue-handsontable의 예제페이지 < 예제페이지는 이 페이지 하나만 있어서 딱히 도움이 안됐다..

일단 template영역은 handsontable을 적용시킬 요소하나를 작성한다. id="hot-table"로 하였다.



script영역은 hot 이란 전역변수를 만들었고,

data에 컬럼가로사이즈, 컬럼명, 컬럼 타입들을 정의해두었다.

hadnsontable 인스턴스 생성은 methods에 따로 일단 정의했다.


컴포넌트식이아니라 기존 javascript형태라 거의 비슷하게 해주면 된다.

fnCreateTable란 메소드를 만들어놨으니, vue 라이프 사이클인 mounted에서 최초 1회 실행을 하였다.


vue 처음 라이프 사이클은 대충 beforeCreate > created > beforeMount > mounted 정도로.

vue생성전 > 생성 > vue를 부착전 > 부착완료 정도로 이해해두면 된다.


스타일은 css하나 import해주고 style태그에 알맞게 정의해주면된다.




vue로 handsontable을 적용한 모오습.

* pro버전 사용시 좌측하단에 라이센스 알림 문구가 텍스트로 2줄정도 뜬다.



적용 후 handsontable을 제어하고싶을 땐 전역으로 선언해둔 hot에 접근하면된다.

hot.getDataAtCell(0, 0)
hot.setDataAtCell(0, 0, 'hello')
hot.deselectCell()
hot.getData()
hot.render()

이런식으로 하면 vue를 사용하는 의미가 없는것같긴하지만,, 컴포넌스식 사용은 나중에,,

반응형