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

@@ -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"