如何在nuxt.js中实现handsontable

Question

我正在尝试在我使用的项目上安装handsontable

npm install handsontable @handsontable/vue

也许我需要创建一个插件？ 如何在现有的 nuxt 项目中使用 Handsontable？

Answer 1

好吧，我就这样成功了。希望这对您有帮助并节省一些时间。

1. 奔跑

   npm install handsontable @handsontable/vue

2. 在 plugins 目录下创建文件名 vue-handsontable.js 并按以下内容放置。

const HotTable = !process.client ? null : require('@handsontable/vue').HotTable
export default HotTable

3. 打开 nuxt.config.js 并附加以下内容。

  build: {
    vendor: ['handsontable'],
  },
  plugins: [
    { src: '~/plugins/vue-handsontable', ssr: false },
  ]

4. 转到您的模板文件并输入如下所示的行。

<template>
  <HotTable :settings="settings" :data="data"></HotTable>
</template>

<script>
  import HotTable from '~/plugins/vue-handsontable'

  export default {
    data: function() {
      return {
        settings: {
          data: [
            ["", "Ford", "Volvo", "Toyota", "Honda"],
            ["2016", 10, 11, 12, 13],
            ["2017", 20, 11, 14, 13],
            ["2018", 30, 15, 12, 13]
          ],
          colHeaders: true,
          rowHeaders: true,
        }
      };
    },
    head: {
      link: [
        { rel: 'stylesheet', type: 'text/css', 
          href: '/your/path/to/css/directory/handsontable.full.min.css' },
      ]
    },
    components: {
      HotTable
    }
  }
</script>

祝你好运。

修订版 1：

自 Handsontable 7.0.0（2019 年 3 月发布）起，许可证密钥是强制性的。

settings: {
  data: [
    ["", "Ford", "Volvo", "Toyota", "Honda"],
    ["2016", 10, 11, 12, 13],
    ["2017", 20, 11, 14, 13],
    ["2018", 30, 15, 12, 13]
  ],
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation'
}

Answer 2

如果有人想知道如何使

registerAllModules()

工作，方法如下：

1. 按照 Muhammad Ehsanul Hoque 的回答去做
2. 为

   registerAllModules()

   制作另一个插件， 在

   /plugin

   、

   handsontable-regis

构建新文件

/插件/handsontable-regis.js

    const registerAllModules = !process.client ? null : require('handsontable/registry').registerAllModules
    export default registerAllModules

3. 打开 nuxt.config.js 并像之前一样添加以下内容

/nuxt.config.js

    lugins: [
       { src: '~/plugins/handsontable-regis', mode: 'client' },
    ]

4. 然后，在模板文件中导入并调用

   activated

   实时循环中的函数，如下所示

<script>
  import registerAllModules from '~/plugins/handsontable-regis'
  import HotTable from '~/plugins/vue-handsontable'

  export default {
    data: function() {
      return {
        settings: {
          data: [
            ["", "Ford", "Volvo", "Toyota", "Honda"],
            ["2016", 10, 11, 12, 13],
            ["2017", 20, 11, 14, 13],
            ["2018", 30, 15, 12, 13]
          ],
          colHeaders: true,
          rowHeaders: true,
          licenseKey: 'non-commercial-and-evaluation'
        }
      };
    },
    head: {
      link: [
        { rel: 'stylesheet', type: 'text/css', 
          href: '/your/path/to/css/directory/handsontable.full.min.css' },
      ]
    },
    components: {
      HotTable
    },
    activated: {
      registerAllModules
  }
  }
</script>

希望您会发现这很有用

Answer 3

如果想使用Handsontable.renderers.registerRenderer自定义渲染事件，在nuxt框架里import Handsontable from '~/plugins/handsontable'却失效是为什么呢