feat: inputNumber设置空值问题

src/views/demo/nestedFormVaild.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card header="动态增减嵌套表单验证问题">
+    <el-card header="动态增减嵌套表单验证问题(inputNumber设置空的默认值问题)">
         <el-form
             v-if="form && form.groups"
             ref="formRef"
@@ -10,7 +10,21 @@
                 v-for="(item, index) in form.groups"
                 :key="index"
             >
-                <h3>分组：</h3>
+                <h3>
+                    <span> 分组：</span>
+                    <el-button
+                        v-if="form.groups.length > 1"
+                        type="primary"
+                        @click="removeGroup(index)"
+                        >删除分组</el-button
+                    >
+                    <el-button
+                        v-if="index === form.groups.length - 1"
+                        type="primary"
+                        @click="addGroup"
+                        >增加分组</el-button
+                    >
+                </h3>
                 <el-divider></el-divider>
                 <el-form-item
                     label="分组名称"
@@ -45,7 +59,21 @@
                     :key="cIndex"
                 >
                     <el-divider></el-divider>
-                    <h4 class="pl-10 pb-5">规则：</h4>
+                    <h4 class="pl-10 pb-5">
+                        <span>规则：</span>
+                        <el-button
+                            v-if="item.rules.length > 1"
+                            type="primary"
+                            @click="removeRule(index, cIndex)"
+                            >删除规则</el-button
+                        >
+                        <el-button
+                            v-if="cIndex === item.rules.length - 1"
+                            type="primary"
+                            @click="addRule(index)"
+                            >增加规则</el-button
+                        >
+                    </h4>
                     <el-form-item
                         label="规则名称"
                         :prop="`groups[${index}].rules[${cIndex}].alert`"
@@ -82,7 +110,10 @@
                         label="待发时长"
                         :prop="`groups[${index}].rules[${cIndex}].for`"
                     >
-                        <el-input
+                        <el-input-number
+                            :min="0"
+                            :max="999"
+                            :maxlength="3"
                             v-model="cItem.for"
                             placeholder="请输入待发时长"
                         />
@@ -132,7 +163,7 @@ const form = ref({
                         summary: 'IP xxxx 状态异常',
                     },
                     expr: 'up == 1',
-                    for: '0',
+                    for: 1,
                     labels: {
                         severity: 'warning',
                         status: 'firing',
@@ -150,7 +181,7 @@ const form = ref({
                         summary: 'IP xxxx 状态异常',
                     },
                     expr: 'up == 1',
-                    for: '0',
+                    for: 0,
                     labels: {
                         severity: 'warning',
                         status: 'firing',
@@ -163,7 +194,7 @@ const form = ref({
                         summary: 'IP xxxx 状态异常',
                     },
                     expr: 'up == 1',
-                    for: '0',
+                    for: 10,
                     labels: {
                         severity: 'warning',
                         status: 'firing',
@@ -174,6 +205,49 @@ const form = ref({
     ],
 });
 
+const initRules = () => {
+    return {
+        alert: '',
+        annotations: {
+            des: '',
+            summary: '',
+        },
+        expr: '',
+        /**
+         * 当inputNumber设置空的默认值问题(设置空字符串''会有警告，并且会默认转为0), 可以通过设置NaN来解决
+         * 如果后续判断值是否为NaN,需要使用Number.isNaN()来判断，不能使用 === NaN,永远为false
+         */
+        for: NaN,
+        labels: {
+            severity: '',
+            status: '',
+        },
+    };
+};
+
+const initGroup = () => {
+    return {
+        name: '',
+        rules: [initRules()],
+    };
+};
+
+const addGroup = () => {
+    form.value.groups.push(initGroup());
+};
+
+const addRule = (index) => {
+    form.value.groups[index].rules.push(initRules());
+};
+
+const removeGroup = (index) => {
+    form.value.groups.splice(index, 1);
+};
+
+const removeRule = (index, cIndex) => {
+    form.value.groups[index].rules.splice(cIndex, 1);
+};
+
 const validName = (index, value, callback) => {
     const groups = form.value.groups;
     if (groups.length <= 1) {