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

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：国际域名空间、雅安服务器托管、营销软件、网站建设、山西网站维护、网站推广。

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

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

网站名称：如何用vue和element实现限制el-input框输入内容
本文链接：http://bjjierui.cn/article/jpcisc.html