如何用vue和element实现限制el-input框输入内容
<!-- 下布转数 -->
<el-table-column align="right" width="87px"> <template slot="header" slot-scope="scope"> <span class="sort-table-header">下布转数</span> </template> <template slot-scope="scope"> <div> <el-input v-model="scope.row.revolutions_count" placeholder="请输入" size="mini" class="align-right-input count_input table_input" @input="changeSalary(scope.row,scope.$index,'revolutions_count')" @keyup.native="keyboard($event, scope.$index)" ></el-input> </div> </template></el-table-column><!-- 保底转数 --><el-table-column v-if="wage_scheme != 3" align="right" width="87px"> <template slot="header" slot-scope="scope"> <span class="sort-table-header">保底转数</span> </template> <template slot-scope="scope"> <div> <el-input v-model="scope.row.overproduction" placeholder="请输入" size="mini" class="align-right-input over_input table_input" @input="changeSalary(scope.row,scope.$index,'overproduction')" @keyup.native="keyboard($event, scope.$index)" ></el-input> </div> </template></el-table-column><!-- 单价(元/转) --><el-table-column v-if="wage_scheme != 3 || price_mode !=0" align="right" width="87px"> <template slot="header" slot-scope="scope"> <span class="sort-table-header">单价(元/转)</span> </template> <template slot-scope="scope"> <div> <el-input v-model="scope.row.revolution_price" placeholder="请输入" size="mini" class="align-right-input revolution_input table_input" @input="changeSalary(scope.row,scope.$index,'revolution_price')" @keyup.native="keyboard($event, scope.$index)" ></el-input> </div> </template></el-table-column><!-- 保底工资 --><el-table-column v-if="wage_scheme == 1 && price_mode ==1 || wage_scheme == 2 && price_mode ==1" align="right" width="87px"> <template slot="header" slot-scope="scope"> <span class="sort-table-header">保底工资</span> </template> <template slot-scope="scope"> <div> <el-input v-model="scope.row.knit_loom_price" placeholder="请输入" size="mini" class="align-right-input knit_input table_input" @input="changeSalary(scope.row,scope.$index,'knit_loom_price')" @keyup.native="keyboard($event, scope.$index)" ></el-input> </div> </template></el-table-column><!-- 加机费 --><el-table-column v-if="wage_scheme == 1 && price_mode ==1" align="right" width="87px"> <template slot="header" slot-scope="scope"> <span class="sort-table-header">加机费</span> </template> <template slot-scope="scope"> <div> <el-input v-model="scope.row.add_machine_reward" placeholder="请输入" size="mini" class="align-right-input add_input table_input" @input="changeSalary(scope.row,scope.$index,'add_machine_reward')" @keyup.native="keyboard($event, scope.$index)" ></el-input> </div> </template></el-table-column>
// 双向绑定 输入框(下布转数、保底转数、单价(元/转)、保底工资、加机费) - 限制输入
changeSalary(row, index, type) { this.$nextTick(() => { // 先把非数字的都替换掉(空),除了数字和. this.clothProduceData[index][type] = this.clothProduceData[index][ type ].replace(/[^\d.]/g, ""); // 必须保证第一个为数字而不是. this.clothProduceData[index][type] = this.clothProduceData[index][ type ].replace(/^\./g, ""); // 保证只有出现一个.而没有多个. this.clothProduceData[index][type] = this.clothProduceData[index][ type ].replace(/\.{3,}/g, ""); // 保证.只出现一次,而不能出现两次以上 this.clothProduceData[index][type] = this.clothProduceData[index][type] .replace(".", "$#$") .replace(/\./g, "") .replace("$#$", "."); // 限制几位小数 let subscript = -1; for (let i in this.clothProduceData[index][type]) { if (this.clothProduceData[index][type][i] === ".") { subscript = i; } if (subscript !== -1) { if (i - subscript > this.decimalNum(type)) { this.clothProduceData[index][type] = this.clothProduceData[index][ type ].substring(0, this.clothProduceData[index][type].length - 1); } } } });},// 下布转数、保底转数:整数;单价(元/转):4位小数; 保底工资、加机费:2位小数decimalNum(type) { if (type == "revolutions_count" || type == "overproduction") { return -1; } if (type == "revolution_price") { return 4; } if (type == "knit_loom_price" || type == "add_machine_reward") { return 2; }},
// 键盘事件(向上、向下)
keyboard(evt, index) { let newIndex; let _this = this; let ev = evt ? evt : window.event; let clssName = ev.target.offsetParent.className; if (clssName.indexOf("count_input") != -1) { newIndex = index * this.paramNum; } else if (clssName.indexOf("over_input") != -1) { newIndex = index * this.paramNum + 1; } else if (clssName.indexOf("revolution_input") != -1) { let num = this.paramNum === 2 ? 1 : 2; newIndex = index * this.paramNum + num; } else if (clssName.indexOf("knit_input") != -1) { newIndex = index * this.paramNum + 3; } else if (clssName.indexOf("add_input") != -1) { newIndex = index * this.paramNum + 4; } // 获取每一列input let inputAll = document.querySelectorAll(".table_input input"); let allLength = inputAll.length; // 向上 if (ev.keyCode == 38) { if (newIndex <= this.paramNum - 1) { return false; } else { newIndex -= this.paramNum; } if (inputAll[newIndex]) { inputAll[newIndex].focus(); } } // 向下 if (ev.keyCode == 40) { if (newIndex >= allLength - this.paramNum) { return false; } else { newIndex += this.paramNum; } if (inputAll[newIndex]) { inputAll[newIndex].focus(); } }},
因为那五个字段是判断显示的,相应的,paramNum这个参数是一行显示有多少个输入框
clothProduceData是表格绑定的值,也就是tableData
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。