我正在尝试在我使用的项目上安装handontable
npm install handsontable @handsontable/vue
也许我需要创建一个插件？ 如何在一个现存的nuxt项目中使用handontable？
liaotengfei2008 回答：如何在Nuxt.js中实现Handsontable
好的，我由此获得了成功。希望这对您有所帮助，并节省一些时间。
- 运行
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,14,["2018",30,15,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: [
["",13]
],licenseKey: 'non-commercial-and-evaluation'
}