fix: 超过高度才显示滚动条

This commit is contained in:
TsMask
2023-11-25 19:25:19 +08:00
parent a991cf3370
commit ac14a207c4
9 changed files with 26 additions and 14 deletions

View File

@@ -99,7 +99,7 @@ emit('update:columns-dnd', tableColumnsCheckList);
<template #content>
<a-checkbox-group
v-model:value="state.columnsTitleList"
style="width: 100%"
style="width: 100%; max-height: 450px; overflow-y: auto;"
>
<Container orientation="vertical" @drop="fnTableColumnsDrop">
<Draggable v-for="c in tableColumns" :key="c.title">

View File

@@ -1604,7 +1604,7 @@ onMounted(() => {
<!-- 新增框或修改框 -->
<a-modal
width="800px"
:body-style="{ maxHeight: '650px', 'overflow-y': 'scroll' }"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByAdd"

View File

@@ -1078,7 +1078,7 @@ onMounted(() => {
<a-card
size="small"
:bordered="false"
:body-style="{ maxHeight: '650px', 'overflow-y': 'scroll' }"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:loading="treeState.selectLoading"
>
<template #title>
@@ -1648,7 +1648,7 @@ onMounted(() => {
<!-- 新增框或修改框 -->
<a-modal
width="800px"
:body-style="{ maxHeight: '650px', 'overflow-y': 'scroll' }"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByAdd"

View File

@@ -3,6 +3,7 @@ import { reactive, ref, onMounted } from 'vue';
import { PageContainer } from '@ant-design-vue/pro-layout';
import { message } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import {
getParamConfigTopTab,
@@ -106,7 +107,10 @@ function fnActiveConfigNode(key: string | number) {
title: rule.display,
dataIndex: rule.name,
align: 'left',
width: 5,
resizable: true,
width: 150,
minWidth: 150,
maxWidth: 350,
});
}
columns.push({
@@ -115,7 +119,7 @@ function fnActiveConfigNode(key: string | number) {
key: 'index',
align: 'center',
fixed: 'right',
width: 3,
width: 100,
});
arrayState.columns = columns;
@@ -276,6 +280,8 @@ type ArrayStateType = {
size: SizeType;
/**多列嵌套记录字段 */
columns: Record<string, any>[];
/**表格字段列排序 */
columnsDnd: Record<string, any>[];
/**多列记录数据 */
columnsData: Record<string, any>[];
/**多列嵌套展开key */
@@ -291,6 +297,7 @@ type ArrayStateType = {
let arrayState: ArrayStateType = reactive({
size: 'middle',
columns: [],
columnsDnd: [],
columnsData: [],
arrayChildExpandKeys: [],
data: [],
@@ -1276,12 +1283,13 @@ onMounted(() => {
<a-table
class="table"
row-key="index"
:columns="treeState.selectNode.method === 'get' ? arrayState.columns.filter((s:any)=>s.key !== 'index') :arrayState.columns"
:columns="treeState.selectNode.method === 'get' ? arrayState.columns.filter((s:any)=>s.key !== 'index') : arrayState.columns"
:data-source="arrayState.columnsData"
:size="arrayState.size"
:pagination="false"
:bordered="true"
:scroll="{ x: arrayState.columns.length * 200, y: 450 }"
@resizeColumn="(w:number, col:any) => (col.width = w)"
:show-expand-column="false"
v-model:expanded-row-keys="arrayState.arrayChildExpandKeys"
>
@@ -1295,6 +1303,10 @@ onMounted(() => {
<template #icon> <PlusOutlined /> </template>
{{ t('common.addText') }}
</a-button>
<TableColumnsDnd
:columns="arrayState.columns"
v-model:columns-dnd="arrayState.columnsDnd"
></TableColumnsDnd>
</template>
<!-- 多列数据渲染 -->
@@ -1443,7 +1455,7 @@ onMounted(() => {
<!-- 新增框或修改框 -->
<a-modal
width="800px"
:body-style="{ maxHeight: '650px', 'overflow-y': 'scroll' }"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visible"

View File

@@ -1135,7 +1135,7 @@ onMounted(() => {
<!-- 新增框或修改框 -->
<DraggableModal
width="800px"
:body-style="{ height: '650px', 'overflow-y': 'scroll' }"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1566,7 +1566,7 @@ onMounted(() => {
<!-- 批量增加框 -->
<DraggableModal
width="800px"
:body-style="{ height: '650px', 'overflow-y': 'scroll' }"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByBatch"

View File

@@ -528,7 +528,7 @@ onMounted(() => {
&-html {
max-height: 300px;
overflow-y: scroll;
overflow-y: auto;
}
}
</style>

View File

@@ -528,7 +528,7 @@ onMounted(() => {
&-html {
max-height: 300px;
overflow-y: scroll;
overflow-y: auto;
}
}
</style>

View File

@@ -528,7 +528,7 @@ onMounted(() => {
&-html {
max-height: 300px;
overflow-y: scroll;
overflow-y: auto;
}
}
</style>

View File

@@ -528,7 +528,7 @@ onMounted(() => {
&-html {
max-height: 300px;
overflow-y: scroll;
overflow-y: auto;
}
}
</style>