입문

Vue #2 Advent Calendar 2019의 12일째 보도입니다.
작년에 한 사람이 Handsontable Advent Calendar 2018을 열었는데 그중에 Handsontable for Vue라는 기사를 썼어요.
조작 방법
미안합니다.그 다음에 동작의 부분을 적으세요.
Handsontable for Vue 소개
그래서 동작법을 쓰지 않은 지 1년이 지났다.
[2021/08/05 추기]
드디어 Handsontable for Vue를 진정으로 만져보았기 때문에 알아차린 것을 기억합니다.

배포 방법

IT 라이센스의 Handsontable 6.2.2를 예로 들 수 있습니다.
npm에서handsontable와 공식 포장기 @handsontable/vue를 설치합니다.
※ 포장 @handsontable/vue는 handsontable 본체를 포함하지 않음

npm install [email protected]
npm install @handsontable/[email protected]

Handsontable 6.2.2에 대응하는 것은 @handsontable/vue3.1.0입니다.
또한,vue.js는 2.6.14입니다.

패키지 설치 프로그램에 배포

Handsontable은 NuGet 버전을 준비했지만 vue-handsontable-official NuGet 버전을 준비하지 않았기 때문에 Visual Studio의 경우 Package Installer를 설치하는 것이 좋습니다.
도구 -> 확장 및 업데이트 프로그램에서 확장 및 업데이트 화면을 엽니다.[온라인]을 선택하고 package installer를 검색합니다.
설치가 완료된 후(Visual Studio 재부팅) 항목의 마우스 오른쪽 버튼 클릭 메뉴에서 빠른 설치 패키지를 선택합니다.
화면이 표시되면 "npm"을 선택하고 "@handsontable/vue"를 입력하고 버전을 3.1.0으로 설정한 후 "Install"단추를 누르십시오.

필요한 건 그냥'vue-handsontable.min.js'이면 돼요.

CDN 활용

npm을 사용하는 것은 오프라인에서도 작업을 할 수 있도록 하기 때문에 온라인일 뿐이라면 CDN을 사용하는 것이 좋다.
CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/6.2.2/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/[email protected]/dist/vue-handsontable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>

조작 방법

테이블 만들기

여전히 Vue입니다.js가 익숙하게 사용되지 않았기 때문에'Vue.js에서handsontable 사용하기'을 참고하십시오.
※ 도서관 버전은 새 것입니다.
샘플은 [Handsontable] 가져오기 및 설정과 같다.

CodePen은 Qiita로 내장할 수 있으므로 CodePen을 사용합니다.
See the PenHandsontable for vueby 및 트리(@yaju-the-encoder)
on CodePen .

데이터 가져오기

지금은 Handsontable입니다.vue 데이터에 초기표 데이터를 썼지만 실제로는 이런 사용 방법이 없기 때문에 데이터를 읽어야 합니다p>

[2021/08/05 추기]

데이터 세트 버튼을 클릭하여 데이터를 설정합니다.p>

See the PenHandsontable for vueby 및 트리(@yaju-the-encoder)
on CodePen .

最後に

는 여전히 Vue입니다.나는 아직 js를 익숙하게 사용하지 않아서 그것의 구조를 이해하지 못한다.

데이터를 읽고 기사를 다시 쓰도록 하겠습니다.del>