项目中有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