handsontable问题总结篇

表单滚动条滚动不到最底下

描述：表单有58行，但是滚动条只能滚动到33行。
原因：行高不一致，导致计算不准确
解决办法：rowHeights: 25, // 统一行高，确保计算准确，初始化定义即可，在其他地方不要再赋值

对单元格数据进行格式化，但是会无限循环导致页面卡死

解决办法：// 这里必须写后面的"format"，不然会不停循环更新单元格
this.hot.setDataAtCell(
row,
col,
Number(newValue).toFixed(2),
"format"
);

点击查看代码

afterChange(changes, source) {
      changes?.forEach(([row, col, oldValue, newValue]) => {
        // if (
        //   typeof this.currentCellVal === "string" &&
        //   this.currentCellVal.match(/^[<>!=]+\s*\(.*\)$/)
        // ) {
        // 改成右键菜单定义配置
        console.log('source', source);

        if (source === "edit") {
          if (this.customizeCheckData &&
            this.customizeCheckData[row + "-" + col] && typeof this.customizeCheckData[row + "-" + col]?.split('compare-')[1] === "string" &&
            this.customizeCheckData[row + "-" + col]?.split('compare-')[1].match(/^[<>!=]+\s*\(.*\)$/)
          ) {
            let compareFomrula = this.customizeCheckData[row + "-" + col]?.split('compare-')[1]
            console.log('compareFomrula=', compareFomrula)
            this.parseFormula(compareFomrula, row, col, Number(newValue).toFixed(2));
            // 这里必须写后面的"format"，不然会不停循环更新单元格
            this.hot.setDataAtCell(
              row,
              col,
              Number(newValue).toFixed(2),
              "format"
            );
          }

        }
      });

由于修改了表单横向滚动条高度，导致表单数据错行

解决办法：取消滚动条样式修改

设置最大列，可以避免复制粘贴新增列，maxCols

单元格内置日期插件

点击单元格 显示日期插件，直接选取时间。

点击查看代码

hotsettings:{
cells: (row, col, prop) => {
        const cellProperties = {};
        if (this.customizeData?.[row + "-" + col]?.includes("date-")) {
          // 配置日期编辑器（Handsontable 自动用 new 实例化）
          cellProperties.editor = "date"; // 内置日期编辑器，无需手动调用
          cellProperties.dateFormat = "YYYY-MM-DD"; // 编辑后显示格式
          cellProperties.correctFormat = true; // 自动修正输入格式
          // 配置日期渲染器
          cellProperties.renderer = this.dateRenderer;
          // 日期校验（可选，确保输入有效）
          cellProperties.validator = this.dateValidator;
        }
        // else {
        //   // 非日期单元格：默认文本编辑器和渲染器
        //   cellProperties.editor = "text";
        //   cellProperties.renderer = Handsontable.renderers.TextRenderer;
        // }

        return cellProperties;
      },
}

// 自定义日期渲染器：判断单元格是否为日期类型，若是则格式化
   export function dateRenderer(instance, td, row, col, prop, value, cellProperties) {
      // 调用默认渲染器，避免样式丢失
      Handsontable.renderers.TextRenderer.apply(this, arguments);
// let customizeData= sessionStorage.getItem("customizeData")
      // 检查单元格是否标记为日期类型
      // if (customizeData?.[row + "-" + col]?.includes("date-")) {
        // 格式化日期（使用 Moment.js 或原生 Date 处理）
        const date = new Date(value);
        if (!isNaN(date)) {
          // 确保是有效日期
          td.textContent = `${date.getFullYear()}-${String(
            date.getMonth() + 1
          ).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
        }
        return td
      // }
    }
	// 日期校验
export function dateValidator(value, callback) {
  if (!value) {
    callback(true);
    return;
  }
  // 检查是否为有效日期
  const isValid = moment(value, 'YYYY-MM-DD', true).isValid();
  callback(isValid);
}