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