style: make dialog bodies scrollable

This commit is contained in:
caoqianming 2026-03-11 12:05:37 +08:00
parent 9facdae46f
commit bf6685c670
5 changed files with 37 additions and 5 deletions

View File

@ -119,3 +119,9 @@ a {
.el-dialog {
border-radius: var(--radius-lg);
}
.dialog-scroll .el-dialog__body {
max-height: 60vh;
overflow: auto;
padding-right: 8px;
}

View File

@ -43,7 +43,7 @@
</el-tab-pane>
</el-tabs>
<el-dialog v-model="categoryDialogVisible" :title="categoryDialogTitle" width="480px">
<el-dialog v-model="categoryDialogVisible" :title="categoryDialogTitle" width="480px" class="dialog-scroll">
<el-form :model="categoryForm" label-width="90px">
<el-form-item label="分类名称" required>
<el-input v-model="categoryForm.name" />
@ -58,7 +58,7 @@
</template>
</el-dialog>
<el-dialog v-model="subcategoryDialogVisible" :title="subcategoryDialogTitle" width="520px">
<el-dialog v-model="subcategoryDialogVisible" :title="subcategoryDialogTitle" width="520px" class="dialog-scroll">
<el-form :model="subcategoryForm" label-width="100px">
<el-form-item label="所属分类" required>
<el-select v-model="subcategoryForm.category" filterable>
@ -233,3 +233,11 @@ onMounted(async () => {
await loadSubcategories()
})
</script>
<style scoped>
.dialog-scroll :deep(.el-dialog__body) {
max-height: 60vh;
overflow: auto;
padding-right: 8px;
}
</style>

View File

@ -36,7 +36,7 @@
/>
</div>
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="640px">
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="640px" class="dialog-scroll">
<el-form :model="form" label-width="100px">
<el-form-item label="经销商" required>
<el-input v-model="form.dealer_name" />
@ -204,5 +204,11 @@ onMounted(() => {
display: flex;
justify-content: flex-end;
}
.dialog-scroll :deep(.el-dialog__body) {
max-height: 60vh;
overflow: auto;
padding-right: 8px;
}
</style>

View File

@ -46,7 +46,7 @@
/>
</div>
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="820px">
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="820px" class="dialog-scroll">
<el-form :model="form" label-width="110px">
<el-form-item label="材料名称" required>
<el-input v-model="form.name" />
@ -432,6 +432,12 @@ onMounted(() => {
display: flex;
justify-content: flex-end;
}
.dialog-scroll :deep(.el-dialog__body) {
max-height: 60vh;
overflow: auto;
padding-right: 8px;
}
</style>
<style scoped>

View File

@ -36,7 +36,7 @@
/>
</div>
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px">
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px" class="dialog-scroll">
<el-form :model="form" label-width="90px">
<el-form-item label="用户名" required>
<el-input v-model="form.username" :disabled="isEdit" />
@ -200,4 +200,10 @@ onMounted(() => {
display: flex;
justify-content: flex-end;
}
.dialog-scroll :deep(.el-dialog__body) {
max-height: 60vh;
overflow: auto;
padding-right: 8px;
}
</style>