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

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

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

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

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

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

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

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

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

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

表格回显数据如图：

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

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

页面效果如图：

 点击确定按钮，获取的数据格式为：

{"excelHeader":["姓名","年龄","性别"],"excelData":[{"姓名":"张三","年龄":18,"性别":"男"},{"姓名":"赵兰","年龄":17,"性别":"女"},{"姓名":"李四","年龄":20,"性别":"男"}]}

注意一：如果想每次打开对话框都重新加载数据和渲染画布，则在对话框加上两行代码：     :visible.sync="centerDialogVisible"；v-if="centerDialogVisible"

注意二：luckysheet文件的引用路径一定要对，如图：

好了，今天分享的关于Luckysheet组件在vue中使用的方法，就到这里了，希望能够帮助到大家。

到此这篇关于Vue-Luckysheet的使用方法的文章就介绍到这了,更多相关Vue Luckysheet使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！