限制柜型数字输入

src/views/ecw/cabinet/index.vue

@@ -87,13 +87,13 @@
           <el-input v-model="form.name" :placeholder="$t('请输入柜型名称')" />
         </el-form-item>
         <el-form-item label="体积(m³)" prop="volume">
-          <el-input v-model.number="form.volume" :placeholder="$t('请输入体积')" />
+          <el-input v-model.trim="form.volume"  @input="limitInput($event,'volume')"  :placeholder="$t('请输入体积')" />
         </el-form-item>
         <el-form-item label="重量(Kg)" prop="weight">
-          <el-input v-model.number="form.weight" :placeholder="$t('请输入重量')" />
+          <el-input v-model.trim="form.weight" @input="limitInput($event,'weight')"  :placeholder="$t('请输入重量')" />
         </el-form-item>
         <el-form-item label="提单补料(CBM)" prop="ladingBill">
-          <el-input v-model.number="form.ladingBill" :placeholder="$t('请输入提单补料')" />
+          <el-input v-model.trim="form.ladingBill" @input="limitInput($event,'ladingBill')"  :placeholder="$t('请输入提单补料')" />
         </el-form-item>
 
         <el-form-item :label="$t('是否启用')" prop="status">
@@ -146,7 +146,11 @@ export default {
         status: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        volume: 0,
+        weight: 0,
+        ladingBill:0
+      },
       // 表单校验
       rules: {
         name: [{ required: true, message: this.$t("柜型名称不能为空"), trigger: "blur" }],
@@ -182,8 +186,9 @@ export default {
       this.form = {
         id: undefined,
         name: undefined,
-        volume: undefined,
-        weight: undefined,
+        volume: 0,
+        weight: 0,
+        ladingBill:0,
         status: undefined,
         sort: undefined,
       };
@@ -264,6 +269,25 @@ export default {
           this.$download.excel(response, '机柜配置.xls');
           this.exportLoading = false;
         }).catch(() => {});
+    },
+
+    limitInput(value, name) {
+      let val = (value && value.split("")) || [];
+      let reg1 = /\d/;
+      let reg2 = /\./;
+      // 第一个字符不能为小数点
+      if (val[0] == ".") {
+        this.form[name] = "";
+        return;
+      }
+      // 过滤掉除数字和小数点外的字符
+      val = val.filter((e) => reg1.test(e) || reg2.test(e));
+      // 匹配小数点后只能有两位小数
+      // 解释一下这个match正则规格
+      // ^\d* 是指以数字开头，后面允许输入0到多位数字
+      // (\.?) 是指只允许一个小数点
+      // \d{0,2} 是指只允许0到2位小数
+      this.form[name] = val.join("").match(/^\d*(\.?\d{0,2})/g)[0] || null;
     }
   }
 };