Bootstrap

用户在输入不符合格式要求的内容或出现多个小数点时,无法继续输入新内容,但仍然可以使用后退键进行修正

<template>
  <el-table-column label="单价" align="center" prop="salesPrice">
    <template slot-scope="scope">
      <el-input
        v-model="scope.row.salesPrice"
        @input="validatePriceInput(scope)"
        :disabled="isDisabled"
        v-show="!isDisabled"
      ></el-input>
    </template>
  </el-table-column>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: false,
    };
  },
  methods: {
    validatePriceInput(scope) {
      const input = scope.row.salesPrice;
      const countDots = input.split('.').length - 1;
      const regex = /^\d+(\.\d{0,9})?$/; // 正则表达式,匹配整数或xx.xx格式
      if (!regex.test(input) || countDots > 1) {
        // 如果输入内容不符合格式要求或有多个小数点,可以阻止输入
        scope.row.salesPrice = input.slice(0, -1);
      }
    },
  },
};
</script>

;