lucksheet双击无法实现编辑，禁止日期转换为数字，第一次调用luckysheet.setSheetActive(0)报错的问题解决

最新推荐文章于 2025-08-07 12:32:03 发布

原创最新推荐文章于 2025-08-07 12:32:03 发布 · 4.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#luckysheet

本文探讨了luckysheet组件中双击单元格输入框失效的问题，原因是其他绝对定位元素的z-index值较高。解决方法是提升luckysheet-input-box的z-index。同时，介绍了如何防止日期被自动转为数字。还提及了初始化luckysheet时避免设置默认激活sheet的错误，并给出了修复代码。

当luckysheet为弹出框组件时，双击单元格没有反应没有出现输入框

原因：lucksheet单元格的输入框对应的className为luckysheet-input-box，其position为absolute，页面中存在其他absolute定位的元素的z-index值大于luckysheet-input-box对应的z-index时，双击单元格时输入框不会显示。
解决：单独设置luckysheet-input-box的z-index属性

.luckysheet-input-box{
  z-index: 10000000000;/*具体的值根据实际情况而定，需要比下面的其他元素的z-index大*/
}

如何禁止日期转换为数字

当表格中有类似2021-2-5 20:51:00,2021/2/5 20:51:00等表示日期的值时，luckysheet会自动将其值存为数字形式
在这里插入图片描述
这样的问题是当导出表格时，得到的excel表格数据对应日期的单元格也显示为数字形式，如果不想使用这种效果可以设置单元格值格式：查看luckysheet单元格属性

"ct": {
        "fa": "@",//表示纯文本
        "t": "s"
    },

在这里插入图片描述

第一次调用luckysheet.setSheetActive(0)报错

有时候我们想要更新某个sheet页数据等，可以将该sheet页设置为活跃状态，然后通过luckysheet.方法名()来实现相应的擦欧总，但是初始化lucky sheet后，这里默认设置了order为0的sheet页是活跃状态，但是在调用方法时并不知道当前是否刚初始化后，此时直接调用luckysheet.setSheetActive(0)然后调用setCellData报错：
api.js:103 Uncaught TypeError: Cannot read property ‘0’ of undefined
在这里插入图片描述

解决：初始化时不要将第一个order为0的sheet页设置为活跃状态

private initSheet(celldata: any[]) {
        luckysheet.create({
            container: "luckysheetContent",
            lang: 'zh', // 设定表格语言
            data: [{
                name: `sheet1`,
                color: "red",
                status: 0,
                order: 0,
                index: 0,
                celldata:celldata,
                defaultColWidth: 150,
                defaultRowHeight: 24,
                column: 18, //列数
            },
            {
                name: `sheet1`,
                color: "red",
                status: 1,//活跃状态
                order: 1,
                index: 1,
                celldata:celldata,
                defaultColWidth: 150,
                defaultRowHeight: 24,
                column: 18, //列数
            }
        ],
            showinfobar: false,
        });
        
    }