添加台桌增加提交限制

src/views/table/components/addTable.vue

@@ -13,7 +13,9 @@
       label-position="left"
     >
       <el-form-item label="选择区域" prop="areaId">
-        <el-select v-model="form.areaId" placeholder="请选择区域">
+        <el-select v-model="form.areaId" placeholder="请选择区域"
+        @change="selectChange($event, 'form' , 'areaId')"
+        >
           <el-option
             :label="item.name"
             :value="item.id"
@@ -32,7 +34,7 @@
           ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="台桌标识" >
+      <el-form-item label="台桌标识"  prop="sign">
         <div class="u-flex">
             <div class="u-flex" style="width: 57px;">
                   <el-input
@@ -155,14 +157,14 @@ export default {
           {
             required: true,
             message: "请选择区域",
-            trigger: "blur",
+            trigger: ["blur","change"],
           },
         ],
         sign: [
           {
             required: true,
             message: "请输入台桌标识",
-            trigger: "blur",
+            trigger: ["blur","change"],
           },
         ],
       },
@@ -173,6 +175,10 @@ export default {
     this.resetForm = { ...this.form };
   },
   methods: {
+    //解决selectc值改变后未验证问题
+    selectChange($event, ref, type) {
+      this.$refs[ref][0].validateField(type)
+    },
     onSubmitHandle() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {