Browse Source

edit 样式微调

reaper 4 years ago
parent
commit
a5c5094157
1 changed files with 144 additions and 127 deletions
  1. 144 127
      src/components/knowledgeExtra/AddNewRuleTable.vue

+ 144 - 127
src/components/knowledgeExtra/AddNewRuleTable.vue

@@ -17,7 +17,7 @@
     justify-content: space-around;
     .btn_div {
       flex: 1;
-      height: 40px;
+      height: 80px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -33,6 +33,9 @@
     height: 100%;
     margin: 0 auto;
   }
+  /deep/ .el-form-item__error {
+    position: relative;
+  }
   .type_content {
     /deep/ .el-form-item--mini.el-form-item,
     .el-form-item--small.el-form-item {
@@ -46,6 +49,25 @@
       // flex: 1;
       // min-width: 200px;
     }
+    .type_content_item1 {
+      .row_box {
+        .el-col {
+          /deep/ .el-form-item__error {
+            position: absolute;
+            width: 260px;
+            // top: -10px;
+            left: 0;
+            white-space: normal;
+            opacity: 0;
+          }
+        }
+        .el-col:nth-child(1) {
+          /deep/ .el-form-item__error {
+            opacity: 1;
+          }
+        }
+      }
+    }
   }
   .custom_table_header {
     vertical-align: middle;
@@ -56,9 +78,6 @@
       margin-right: 4px;
     }
   }
-  /deep/ .el-form-item__error {
-    position: relative;
-  }
 }
 </style>
 
@@ -251,142 +270,140 @@
             </el-form-item>
             <!-- v-if="klRuleByIdSub[scope.$index].dataType === '1'" -->
             <el-form-item
-              class="type_content_item"
-              style="flex: 2;margin:0 10px"
+              class="type_content_item type_content_item1"
+              style="flex: 2; height: 54px; margin: 0 10px"
               label="最大值:"
               v-if="scope.row.dataType === '1'"
             >
-              <div>
-                <el-row :gutter="10">
-                  <el-col :span="6">
-                    <el-form-item
-                      :prop="`klRuleByIdSub[${scope.$index}].subMaxOperator`"
-                      :rules="[
-                        {
-                          validator: (rule, value, callback) => {
-                            subMaxOperator(scope, rule, value, callback);
-                          },
-                          trigger: 'blur'
-                        }
-                      ]"
+              <!-- <div> -->
+              <el-row :gutter="10" class="row_box">
+                <el-col :span="6">
+                  <el-form-item
+                    :prop="`klRuleByIdSub[${scope.$index}].subMaxOperator`"
+                    :rules="[
+                      {
+                        validator: (rule, value, callback) => {
+                          subMaxOperator(scope, rule, value, callback);
+                        },
+                        trigger: 'blur'
+                      }
+                    ]"
+                  >
+                    <el-select
+                      v-model="scope.row.subMaxOperator"
+                      placeholder="请选择"
+                      clearable
                     >
-                      <el-select
-                        v-model="scope.row.subMaxOperator"
-                        placeholder="请选择"
-                        clearable
+                      <el-option
+                        v-for="item in operMaxList"
+                        :key="item.key"
+                        :label="item.name"
+                        :value="item.key"
                       >
-                        <el-option
-                          v-for="item in operMaxList"
-                          :key="item.key"
-                          :label="item.name"
-                          :value="item.key"
-                        >
-                        </el-option>
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item
-                      :prop="`klRuleByIdSub[${scope.$index}].subMaxValue`"
-                      :rules="[
-                        {
-                          validator: (rule, value, callback) => {
-                            subMaxValue(scope, rule, value, callback);
-                          },
-                          trigger: 'blur'
-                        }
-                      ]"
-                    >
-                      <el-input
-                        type="text"
-                        v-model="scope.row.subMaxValue"
-                        placeholder="填写数值"
-                      />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item
-                      :prop="`klRuleByIdSub[${scope.$index}].subMaxUnit`"
-                      :rules="rules.subMaxUnit"
-                    >
-                      <el-input
-                        type="text"
-                        v-model.trim="scope.row.subMaxUnit"
-                        placeholder="填写单位"
-                      />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-              </div>
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item
+                    :prop="`klRuleByIdSub[${scope.$index}].subMaxValue`"
+                    :rules="[
+                      {
+                        validator: (rule, value, callback) => {
+                          subMaxValue(scope, rule, value, callback);
+                        },
+                        trigger: 'blur'
+                      }
+                    ]"
+                  >
+                    <el-input
+                      type="text"
+                      v-model="scope.row.subMaxValue"
+                      placeholder="填写数值"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item
+                    :prop="`klRuleByIdSub[${scope.$index}].subMaxUnit`"
+                    :rules="rules.subMaxUnit"
+                  >
+                    <el-input
+                      type="text"
+                      v-model.trim="scope.row.subMaxUnit"
+                      placeholder="填写单位"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <!-- </div> -->
             </el-form-item>
             <el-form-item
-              class="type_content_item"
+              class="type_content_item type_content_item1"
               style="flex: 2"
               label="最小值:"
               v-if="scope.row.dataType === '1'"
             >
-              <div class="select-item clearfix">
-                <el-row :gutter="10">
-                  <el-col :span="6">
-                    <el-form-item
-                      :prop="`klRuleByIdSub[${scope.$index}].subMinOperator`"
-                      :rules="[
-                        {
-                          validator: (rule, value, callback) => {
-                            subMinOperatorRule(scope, rule, value, callback);
-                          },
-                          trigger: 'blur'
-                        }
-                      ]"
+              <el-row :gutter="10" class="row_box">
+                <el-col :span="6">
+                  <el-form-item
+                    :prop="`klRuleByIdSub[${scope.$index}].subMinOperator`"
+                    :rules="[
+                      {
+                        validator: (rule, value, callback) => {
+                          subMinOperatorRule(scope, rule, value, callback);
+                        },
+                        trigger: 'blur'
+                      }
+                    ]"
+                  >
+                    <el-select
+                      v-model="scope.row.subMinOperator"
+                      placeholder="请选择"
+                      clearable
                     >
-                      <el-select
-                        v-model="scope.row.subMinOperator"
-                        placeholder="请选择"
-                        clearable
+                      <el-option
+                        v-for="item in operMinList"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.name"
                       >
-                        <el-option
-                          v-for="item in operMinList"
-                          :key="item.name"
-                          :label="item.name"
-                          :value="item.name"
-                        >
-                        </el-option>
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item
-                      :prop="`klRuleByIdSub[${scope.$index}].subMinValue`"
-                      :rules="[
-                        {
-                          validator: (rule, value, callback) => {
-                            subMinValueRule(scope, rule, value, callback);
-                          },
-                          trigger: 'blur'
-                        }
-                      ]"
-                    >
-                      <el-input
-                        type="text"
-                        v-model="scope.row.subMinValue"
-                        placeholder="填写数值"
-                      />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item
-                      :prop="`klRuleByIdSub[${scope.$index}].subMinUnit`"
-                      :rules="rules.subMinUnit"
-                    >
-                      <el-input
-                        type="text"
-                        v-model.trim="scope.row.subMinUnit"
-                        placeholder="填写单位"
-                      />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-              </div>
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item
+                    :prop="`klRuleByIdSub[${scope.$index}].subMinValue`"
+                    :rules="[
+                      {
+                        validator: (rule, value, callback) => {
+                          subMinValueRule(scope, rule, value, callback);
+                        },
+                        trigger: 'blur'
+                      }
+                    ]"
+                  >
+                    <el-input
+                      type="text"
+                      v-model="scope.row.subMinValue"
+                      placeholder="填写数值"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item
+                    :prop="`klRuleByIdSub[${scope.$index}].subMinUnit`"
+                    :rules="rules.subMinUnit"
+                  >
+                    <el-input
+                      type="text"
+                      v-model.trim="scope.row.subMinUnit"
+                      placeholder="填写单位"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
             </el-form-item>
             <!-- v-if="klRuleByIdSub[scope.$index].subType !== 6 && klRuleByIdSub[scope.$index].dataType === '2'" -->
             <el-form-item