vue四舍五入 保留四位小数和只能输入4位小数

一 这个行内,带校验也好用 https://blog.csdn.net/sinat_24230393/article/details/88207929

二 这个也好用

 

 <el-table-column label="数量" min-width="120">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'product_bom.' + scope.$index + '.count'"
                  :ref="'product_bom.' + scope.$index + '.count'"
                  :rules="[
                    { required: true,  message: '请填写数量,最多5位小数'},
                  ]"
                >
                  <el-input
                    :disabled="inputDisable"
                    v-model="scope.row.count"
                    onkeyup="if(isNaN(value)){value=null}if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+6)}"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

 

 三 基本用法 四舍五入

methods: {
    // 小数点后4位
    decimal4(value) {
      const newVal = parseFloat(value).toFixed(4);
      return newVal;
    },
  },

 四 只能输入n位小数

 // 保留小数函数
    oninputNum(val, num) {
      if (val) {
        // 转字符串
        let str = typeof val == "string" ? val : val.toString();
        let len1 = str.substr(0, 1);
        let len2 = str.substr(1, 1);
        // 如果第一位是0，第二位不是点，就用数字把点替换掉
        if (str.length > 1 && len1 == 0 && len2 != ".") {
          str = str.substr(1, 1);
        }
        // 第一位不能是.
        if (len1 == ".") {
          str = "";
        }
        // 限制只能输入一个小数点
        if (str.indexOf(".") != -1) {
          var str_ = str.substr(str.indexOf(".") + 1);
          if (str_.indexOf(".") != -1) {
            str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
          }
        }
        // 正则替换
        str = str.replace(/[^\d^\.]+/g, ""); // 保留数字和小数点
        if (num == 2) {
          str = str.replace(/^(\-)*(\d+)\.(\d{2}).*$/, "$1$2.$3"); // 小数点后只能输2位
        }
        if (num == 4) {
          str = str.replace(/^(\-)*(\d+)\.(\d{4}).*$/, "$1$2.$3"); // 小数点后只能输4位
        }
        return str;
      } else {
        return val;
      }
    },


// 调用 使用

this.value = this.oninputNum(
  this.value,
  2
);

 五 vue校验只能输入小数

data() {
    const decimal4 = (rule, value, callback) => {
      const num = /^\d+(\.\d{1,4})?$/;
      if (!num.test(value)) {
        callback(new Error("请输入数字,最多四位小数！"));
      } else {
        callback();
      }
    };

    return {
      // 加载
      loading: true,
      // 校验
      Rules: {
        price: [
              {
                required: true,
                message: "请填写工业价格,最多4位小数",
                validator: decimal2,
                trigger: "blur"
              }
            ],
        }
    }
},