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 加上这个属性输入字符进行隐藏一般用于密码框使用

 

1. <el-table-column label="得分">

2. <template slot-scope="scope">

3. <div v-if="queryObj.isResult != undefined">{{scope.row.getDetailScore}}</div>

4. <div v-else>

5. <el-input

6. type="number"

7. size="small"

8. v-model.number="scope.row.getDetailScore"

9. @input="numberChange($event,scope.$index)"

10. @change="numberChange($event,scope.$index)"

11. ></el-input>

12. </div>

13. </template>

14. </el-table-column>

15. js:

16. numberChange(val, index) {

17. let integer = /^(-|\+)?\d+$/; //输入整数(包括0)的正则，解决不能输入负号问题

18. if (integer.test(val)) {

19. if (this.tableData[index].thirdScore == 0) {

20. this.tableData[index].getDetailScore = parseInt(val);

21. } else {

22. this.tableData[index].getDetailScore = parseInt(val);

23. this.$nextTick(() => {

24. let newVal = Math.min(parseInt(val), this.tableData[index].thirdScore);

25. this.tableData[index].getDetailScore = newVal;

26. });

27. }

28. }

29. },