表单校验校验规则

src/views/SchedulingPage/EnergyManagePage.vue

@@ -376,7 +376,7 @@ onMounted(() => {
     </el-table>
   </div>
   <el-dialog v-model="dialogVisible" @open="openDialog" :title="action == 'add' ? '数据新增' : '数据修改'" width="50%" :before-close="handleClose">
-    <el-form :inline="true" :model="formEnergy" :rules="rules" ref="energyForm" :hide-required-asterisk="true">
+    <el-form :inline="true" :model="formEnergy" :rules="rules" ref="energyForm" :hide-required-asterisk="true" :inline-message="true">
       <table cellpadding="0" cellspacing="1" style="background-color: #99bbe8 ; height: 50px;">
         <tr>
           <th style="width: 25%">供热站</th>
@@ -535,4 +535,41 @@ table td {
 .el-cascader-menu {
   width: 100%;
 }
+// 校验时样式
+.el-form-item__content {
+  margin-left: 0 !important;
+}
+
+.el-form-item__error--inline {
+  top: auto;
+  left: auto;
+  display: inline-block;
+  margin-left: 10px;
+  line-height: 18px;
+  position: fixed;
+  padding: 5px 10px;
+  background: rgba(0, 0, 0, 0.85);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 5px rgba(0, 0, 0, 0.6);
+  word-break: break-all;
+  word-wrap: break-word;
+  border-radius: 4px;
+  margin-top: 4px;
+  max-width: 160px;
+  min-width: 100px;
+  height: auto;
+  z-index: 10000;
+  color: white !important;
+}
+
+.el-form-item__error--inline::before {
+  content: '';
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-right-color: #080B12;
+  position: absolute;
+  left: -11px;
+  top: 8px;
+}
 </style>