Parcourir la source

dialogForm组件增加最大高度

tongshangming il y a 2 ans
Parent
commit
5fcd17b8e0
1 fichiers modifiés avec 40 ajouts et 26 suppressions
  1. 40 26
      src/components/core/form/DialogForm.vue

+ 40 - 26
src/components/core/form/DialogForm.vue

@@ -56,33 +56,47 @@ const submit = async () => {
 </script>
 
 <template>
-  <el-dialog
-    draggable
-    :title="dialogTitle"
-    align-center
-    v-bind="dialogConfig"
-    v-model="dialogVisible"
-    @close="closeDialog"
-    :close-on-click-modal="false"
-  >
-    <pro-form
-      ref="formRef"
-      :formConfig="formConfig"
-      :formData="formInitData"
-      :formSlots="formSlots"
-      :create="create"
-      :update="update"
+  <div>
+    <el-dialog
+      draggable
+      :title="dialogTitle"
+      align-center
+      v-bind="dialogConfig"
+      v-model="dialogVisible"
+      @close="closeDialog"
+      :close-on-click-modal="false"
     >
-      <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
-        <slot :name="slot.alias" v-bind="slotProps"></slot>
-      </template>
-    </pro-form>
+      <pro-form
+        class="pro-form"
+        ref="formRef"
+        :formConfig="formConfig"
+        :formData="formInitData"
+        :formSlots="formSlots"
+        :create="create"
+        :update="update"
+      >
+        <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
+          <slot :name="slot.alias" v-bind="slotProps"></slot>
+        </template>
+      </pro-form>
 
-    <template #footer v-if="!formConfig.disabled">
-      <el-button icon="Close" @click="closeDialog">取消</el-button>
-      <el-button icon="Check" type="primary" @click="submit">保存</el-button>
-    </template>
-  </el-dialog>
+      <template #footer v-if="!formConfig.disabled">
+        <el-button icon="Close" @click="closeDialog">取消</el-button>
+        <el-button icon="Check" type="primary" @click="submit">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-dialog__header) {
+  border-bottom: 1px solid #e3edfe;
+}
+:deep(.el-dialog__body) {
+  max-height: calc(100vh - 56px - 62px);
+  overflow: auto;
+}
+:deep(.el-dialog__footer) {
+  border-top: 1px solid #e3edfe;
+}
+</style>