vue-luckysheet 的销毁与局部刷新

最新推荐文章于 2025-10-11 19:29:32 发布

原创最新推荐文章于 2025-10-11 19:29:32 发布 · 6.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

VUE 专栏收录该内容

30 篇文章

订阅专栏

本文介绍Luckysheet中实现表格销毁及局部刷新的方法，通过调整单元格行数并利用setCellValue方法更新数据，最终调用refresh方法完成局部刷新。适用于需要动态更新大量表格数据的场景。

luckysheet 的销毁与局部刷新

销毁
局部刷新
- 详细代码如下

文档的信息少之又少，又写的感觉不那么清晰，迷茫不知所措之际，打印了window.luckysheet才发现真管用

如下：
在这里插入图片描述

销毁

window.luckysheet.destroy()

局部刷新

原理：每一次请求count+1
上一个请求完成再次执行excel请求函数
直到count>最大的请求次数（最大的请求次数–此值后台返回）

由于我的数据是每个cell进行前台接收的,所以使用了setCellValue方法

window.luckysheet.setCellValue(o.r, o.c, o.v, options)
在这里插入图片描述
详细说明如下：（其他方法也可参考进行使用）

然后数据进行Excel刷新：window.luckysheet.refresh(); --此刷新是无感的

详细代码如下

/*参数说明：
jsonStr_parse： --lucksheet 返回的规定数据

o：--一个cell的数据值
例：{"r": 11,"c": 0,"v": { "m": "014000053870","ct": {"fa": "@","t": "s"},"v": "014000053870" }}

requestCount：请求excel接口次数（从1开始）

pageSize:一次请求的数据量

*/
jsonStr_parse.forEach((item, index) => {
  item.celldata.forEach(o => {
   //修改o.r 行数（因为后台返回的参数每一次都是从0行开始的）
    o.r = o.r + (requestCount - 1) * pageSize; 
    let options = { order: index }; //order ：第几个sheet
    window.luckysheet.setCellValue(o.r, o.c, o.v, options)
  })
})
//刷新
window.luckysheet.refresh();