如何用vue和element实现限制el-input框输入内容-创新互联

创新互联于2013年成立，是专业互联网技术服务公司，拥有项目网站设计制作、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元沈北新做网站,已为上家服务,为沈北新各地企业和个人服务,联系电话:13518219792

// 双向绑定 输入框（下布转数、保底转数、单价(元/转)、保底工资、加机费） - 限制输入

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：如何用vue和element实现限制el-input框输入内容-创新互联
分享链接：http://jkwzsj.com/article/cdsheh.html