elementui input 只能输入数字并且限制最大值
<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;
-
});
-
}
-
}
-
},