<el-input type="number" οninput="if(value.length>10)value=value.slice(0,10)" @keyup.enter.native="query()" onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))" :max="99999999"> </el-input>
oninput 是个自定义事件 在事件里面获取输入的数字长度,来进行判断如果大于规定长度就进行剪切。 keyup.enter.native 是个键盘回车事件,当按下Enter键时触发query()事件。 max为输入框的最大值,如果input的type=number那么输入框内是输入不了字符的。
number框 解决输入e的问题 主要原因是:e在数学上代表的是无理数,是一个无限不循环的小数,其值约为2.7182818284,所以在输入e的时候,输入框会把e当成一个数字看待。 可以采用下面的方式来避免这个BUG,在input标签中添加如下属性: onKeypress=“return(/[\d.]/.test(String.fromCharCode(event.keyCode)))”
<el-input placeholder="请输入密码" v-model="input" :show-password="true"></el-input> show-password 加上这个属性输入字符进行隐藏一般用于密码框使用
<el-table-column label="得分">
<template slot-scope="scope">
<div v-if="queryObj.isResult != undefined">{{scope.row.getDetailScore}}</div>
<div v-else>
<el-input
type="number"
size="small"
v-model.number="scope.row.getDetailScore"
@input="numberChange($event,scope.$index)"
@change="numberChange($event,scope.$index)"
></el-input>
</div>
</template>
</el-table-column>
js:
numberChange(val, index) {
let integer = /^(-|\+)?\d+$/; //输入整数(包括0)的正则,解决不能输入负号问题
if (integer.test(val)) {
if (this.tableData[index].thirdScore == 0) {
this.tableData[index].getDetailScore = parseInt(val);
} else {
this.tableData[index].getDetailScore = parseInt(val);
this.$nextTick(() => {
let newVal = Math.min(parseInt(val), this.tableData[index].thirdScore);
this.tableData[index].getDetailScore = newVal;
});
}
}
},