반응형
Vue.js 독립 실행형에서 핸즈통트 가능
사용하고 싶다Vue.js독립 실행형 앱으로(없음)npm패키지)를 구하려고 했다.handsontable앱 내에서 렌더링을 성공하지 못한 채 렌더링할 수 있다.
이것은 내 현재 구성이다.html파일:
<body>
<div class="container" id="app">
<div>
<hot-table :settings="settings" licenseKey="non-commercial-and-evaluation" />
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/vue/dist/vue-handsontable.min.js"></script>
<script>
var app = new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data: [
['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
['2019', 10, 11, 12, 13],
['2020', 20, 11, 14, 13],
['2021', 30, 15, 12, 13]
],
components: {
HotTable
}
});
</script>
</body>
하지만 나는 실수를 하고 있다.
검색되지 않은 참조 오류: HotTable이 정의되지 않음
독립 실행형 내부에 외부 구성요소를 포함하는 올바른 방법Vue.jsapp? 가능하니?
그 정보는 초보적인 친밀감은 아니지만 모두 그들의 문서에 있다.
https://github.com/handsontable/vue-handsontable-official
코드 예는 컴파일된 Vue(사용)에 대한 것이다.import() 그러나 CDN의 경우 다음과 같이 명시되어 있다.
구성 요소는 다음과 같이 사용할 수 있다.
Handsontable.vue.HotTable
구성 요소를 참조할 수 없도록HotTable, 그러나 이름 앞에 있는 버전을 사용해야 한다.components: {HotTable: Handsontable.vue.HotTable}
또한, 당신의data제대로 선언되지 않았고, 당신은 어떤 데이터도hot-table구성 요소
TL;DR;
다음과 같이 표시되어야 한다.
new Vue({
el: '#app',
components: {
HotTable: Handsontable.vue.HotTable
},
data: function() {
return{
tableData: [
['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
['2019', 10, 11, 12, 13],
['2020', 20, 11, 14, 13],
['2021', 30, 15, 12, 13]
]
}
},
});<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/vue/dist/vue-handsontable.min.js"></script>
<div class="container" id="app">
<div>
<hot-table :data="tableData" licenseKey="non-commercial-and-evaluation"/>
</div>
</div>무료 오픈 소스 대안: https://codesandbox.io/embed/vue-default-template-p4hwn
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://bossanova.uk/jexcel/v3/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />
<div id="spreadsheet"></div>
<input type="button" value="Add new row" onclick="vm.insertRow()" />
<script>
var options = {
data:[[]],
minDimensions:[10,10],
}
var vm = new Vue({
el: '#spreadsheet',
mounted: function() {
let spreadsheet = jexcel(this.$el, options);
Object.assign(this, spreadsheet);
}
});
</script></html>
참조URL: https://stackoverflow.com/questions/57485381/handsontable-in-vue-js-standalone
반응형
'programing' 카테고리의 다른 글
| vuex 작업에서 api 호출을 조롱하는 행위 (0) | 2022.05.21 |
|---|---|
| (VueJS) Vuex Getter는 다른 모듈 상태 변경을 기반으로 업데이트되어야 함 (0) | 2022.05.21 |
| "비교 방식은 일반 계약을 위반한다!" (0) | 2022.05.21 |
| Nuxt / Vue - 돌연변이 처리기 외부에서 vuex 저장소 상태 변경 안 함 (0) | 2022.05.21 |
| if-return-return 또는 if-else-return을 사용하는 것이 더 효율적인가? (0) | 2022.05.21 |