Vue-Luckysheet的使用方法

引用地址：https://blog.csdn.net/Lyy1991Wdl/article/details/124175868

配置文档 · 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文件的引用路径一定要对

  
  
  47964691b1754c5cada28fba740c7a36.png