vue项目中handsontable表格的数值、范围及保留位数限制

项目中有handsontable表格的应用，数值输入错误时，会爆红，但是并不影响数值的保存，项目中要求强制格式化用户的输入，方法如下：

html结构如下：

 <hot-table key="wind" ref="windSandRef" :settings="windSand"></hot-table>

定义vueThis,以便在table的钩子中使用全局this(table中的this指向table本身)

data(){
 const vueThis = this;
 return{}
}

表格数据初始化

        windSand: {
          data: [
            ["林地", "-0.1535", ""],
            ["草地", "-0.1151", ""],
            ["灌木", "-0.0921", ""]
            ],
          colHeaders: ['类型名称', '系数值', '原类型值'],
          columns: [
            {readOnly: true},
            {
              type: 'numeric',
              //限制数值保留位数
              numericFormat: {
                pattern: "0.0000"
              }
            },
            {
              allowEmpty: false
            }
          ],
          //粘贴多行数据前，对粘贴数据的处理
          //限制粘贴的行数粘贴后不超过表格的长度
          beforePaste(data, coords) {
            let pasteDataLength = data.length
            let table = vueThis.$refs.windSandRef.hotInstance
            let tableRowLength = table.getSourceData().length
            let startRowIndex = coords[0].startRow
            let usefulLength = tableRowLength - startRowIndex
            if (pasteDataLength > usefulLength) {
              data.splice(usefulLength, pasteDataLength);
            }
          },
          //表格数据改变后的对表格的处理
          //changes为二维数组，包含所有变化表格的信息
          //格式：【【行，列，旧值，新值】【行，列，旧值，新值】】
          afterChange(changes) {
          //删除表格时，changes为null
            if (changes === null) {
              return false
            }
            //遍历所有变化的表格
            for (let i = 0; i < changes.length; i++) {
              if (changes[i][3] === 0.0000) {
                return;
              }
              //格式化单个表格数据
              vueThis.formatWindSand(changes[i]);
            }
          },
          height: "auto",
          licenseKey: "non-commercial-and-evaluation" // 非商业用途声明
        }

格式化表格数据函数

      formatWindSand(change) {
        let rowIndex = change[0]
        let columnIndex = change[1]
        let newVal;
        //科学计数法转为正常显示的数值
        if (change[3]) {
          newVal = this.transferToNum(change[3])
        }
        //如果是第一列，第三列，不处理
        if (columnIndex === 0 || columnIndex === 2) {
          return;
        }
        let table = this.$refs.windSandRef.hotInstance
        let reg = new RegExp("^-?[0-9]*.?[0-9]*$");
        //是数值就限制范围为[-10,10]
        if (reg.test(newVal)) {  
          let realValue = newVal
          if (realValue > 10) {
            realValue = 10
            table.setDataAtCell(rowIndex, columnIndex, realValue);
          }
          if (realValue < -10) {
            realValue = -10
            table.setDataAtCell(rowIndex, columnIndex, realValue);
          }
        } else { 
		  //不是数值，将输入表格数据设为0.0000
          table.setDataAtCell(rowIndex, columnIndex, 0.0000);
        }
      },

若输入位数过长，输入的数值可能会变成科学计数法，需将数值转化为正常显示数字

      formatVegetationCover(change) {
        let rowIndex = change[0]
        let columnIndex = change[1]
        //科学计数法转为正常显示的数值
        let newVal = this.transferToNum(change[3])
        //如果是第一列，不处理
        if (columnIndex === 0) {
          return;
        }
        let table = this.$refs.vegetationCoverRef.hotInstance
        let valueStr = ((newVal + '').match(/^\d+(\.\d+)?$/g)) || null
        //符合格式
        if (valueStr !== null) {
          let realValue = parseFloat(valueStr)
          if (realValue > 1) {
            realValue = 1
            table.setDataAtCell(rowIndex, columnIndex, realValue);
          }
          return;
        }
        //不符合格式
        table.setDataAtCell(rowIndex, columnIndex, 0);
      },

科学计数法数值转为正常显示数值

transferToNum(x) {
        if (Math.abs(x) < 1.0) {
          var e = parseInt(x.toString().split('e-')[1]);
          if (e) {
            x *= Math.pow(10, e - 1);
            x = '0.' + (new Array(e)).join('0') + x.toString().substring(2);
          }
        } else {
          var e = parseInt(x.toString().split('+')[1]);
          if (e > 20) {
            e -= 20;
            x /= Math.pow(10, e);
            x += (new Array(e + 1)).join('0');
          }
        }
        return x;
      }

注意，限制表格的保留位数为0时，需使用以下方法

          columns: [ 
            {
              type: "numeric",
              numericFormat: {
                pattern: {
                  trimMantissa: true,
                  mantissa: 0
                }
              }
            }
          ]

更多使用方法可以去官网找，使用文档：https://handsontable.com/docs