文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue.js标准中的Handsontable

问Vue.js标准中的Handsontable
EN

Stack Overflow用户

提问于 2019-08-13 21:10:26

回答 2查看 939关注 0票数 3

我想使用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>

但是我发现了一个错误：

未定义的ReferenceError: HotTable未定义

在独立的Vue.js应用程序中包含外部组件的正确方法是什么？有可能吗？

javascript

vue.js

vuejs2

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-08-14 02:32:57

这些信息都在他们的文档中，尽管并不是初学者友好的。

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>

票数 3

Stack Overflow用户

发布于 2020-01-04 19:30:17

一个免费的开源替代方案：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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57485381

复制

相似问题

问Vue.js标准中的Handsontable
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js标准中的HandsontableEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js标准中的Handsontable
EN