如何在nuxt.js中实现handsontable

Posted 2023-03-22

【中文标题】如何在nuxt.js中实现handsontable

【英文标题】：How to implement handsontable into nuxt.js

【发布时间】：2020-06-26 08:31:04

【问题描述】：

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

npm install handsontable @handsontable/vue

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

【参考方案1】：

好的，我成功了。希望这可以帮助您并节省一些时间。

运行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', s-s-r: 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'