Vue-Luckysheet的使用方法及遇到问题解决方法_vue.js_

Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

配置文档 · API · 教程：快速上手 | Luckysheet文档

现将分享我在使用该组件过程中遇到的问题及解决方法。

第一步：定义Luckysheet组件：组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用，因此，先定义好可重复使用的Luckysheet组件。代码如下：

页面样式效果是这样子的，可实现复制粘贴，excel的单元格下拉等表格操作，重点在于创建luckysheet实例时对实例属性的配置。

 第二步：引用组件，在父组件中注册并引用组件。先import 组件，再components 中注册，最后在以标签的形式引用组件。代码如下：

第三步：父组件将接口返回的数据传递给子组件，子组件获取数据渲染数据。代码如下：

父组件中获取数据并绑定参数传值。

子组件获取父组件传递的数据，渲染数据。

表格回显数据如图：

 注意两点，第一数据格式，就是对象数组的转换，没什么难度；第二用到了Luckysheet的钩子函数，钩子函数的用法是在配置对象加一个hook对象，并给hook对象添加一个workbookCreateAfter方法，在工作簿创建好之后就执行这个函数的渲染数据的逻辑。

第四步：父组件获取子组件修改后的数据。父组件的布局和样式有调整，以对话框的形式来引用组件，点击按钮，获取数据。代码如下：