如何在Nuxt.js中实现Handsontable

debugcn 发表于 Dev

尼古拉斯·朗登

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

npm install handsontable @handsontable/vue

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

穆罕默德·埃哈努尔·霍克

好的，我由此获得了成功。希望这对您有所帮助，并节省一些时间。

跑 npm install handsontable @handsontable/vue
在plugins目录下创建文件名vue-handsontable.js，并将其放置如下。

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

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

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

转到您的模板文件，并放入这样的行。

<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'
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。