通用表格传高度修改
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
扈兆增
parent
4f34ac0d65
commit
1b64ba6139
Binary file not shown.
@ -6,7 +6,7 @@
|
||||
:data-source="tableData"
|
||||
:columns="columns"
|
||||
:pagination="paginationConfig"
|
||||
:scroll="{ x: '100%' }"
|
||||
:scroll="scrollConfig "
|
||||
:row-key="rowKey"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
@ -23,6 +23,8 @@ import { ref, computed, onMounted, watch } from "vue";
|
||||
// --- Types ---
|
||||
interface Props {
|
||||
columns: any[];
|
||||
|
||||
scrollY?: string | number;
|
||||
// 请求数据的函数，由父组件传入
|
||||
listUrl: (params: any) => Promise<any>;
|
||||
// 是否开启行选择
|
||||
@ -62,6 +64,12 @@ const size = ref(props.defaultPageSize);
|
||||
const selectedRowKeys = ref<string[]>([]);
|
||||
const selectedRows = ref<any[]>([]);
|
||||
|
||||
// 计算表格滚动高度
|
||||
const scrollConfig = computed(() => ({
|
||||
x: 'max-content',
|
||||
y: props.scrollY, // 注意：如果 scrollY 是 undefined，则不会启用垂直滚动
|
||||
}))
|
||||
|
||||
// --- Row Selection ---
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
@ -192,5 +200,26 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 如有必要，添加少量样式 */
|
||||
|
||||
:deep(.ant-table-wrapper) {
|
||||
height: 100%; /* 让表格容器填满父级 */
|
||||
.ant-spin-nested-loading, .ant-spin-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-table {
|
||||
flex: 1; /* 表格主体区域自动撑满剩余空间 */
|
||||
overflow: hidden; /* 防止内容溢出 */
|
||||
}
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-table-body {
|
||||
flex: 1; /* 表体部分撑满，实现固定表头 + 滚动内容 */
|
||||
overflow: auto !important; /* 出现滚动条的关键 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -204,8 +204,7 @@ const onValuesChange = (changedValues: any, allValues: any) => {
|
||||
|
||||
// 下载模板
|
||||
const downloadTemplate = () => {
|
||||
// 20260429090252740092641634938251
|
||||
downloadFileByUrl(import.meta.env.VITE_APP_PREVIEW_URL + "/?20260429090252740092641634938251", "过鱼设施数据填报模板", "zip");
|
||||
downloadFileByUrl(import.meta.env.VITE_APP_PREVIEW_URL + "/?20260429090252740092641634938251", "过鱼设施数据填报模板");
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div class="guoYuSheShiShuJuTianBao-page">
|
||||
<GuoYuSheShiShuJuTianBaoSearch
|
||||
ref="searchRef"
|
||||
class="search-container"
|
||||
:guoyuStatus="guoyuStatus"
|
||||
:direction="direction"
|
||||
:handle-add="handleAdd"
|
||||
@ -14,87 +15,87 @@
|
||||
@search-finish="handleSearchFinish"
|
||||
/>
|
||||
<!-- 主表格 -->
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:list-url="getFishDraftPage"
|
||||
:search-params="{}"
|
||||
:enable-row-selection="true"
|
||||
:get-checkbox-props="getCheckboxProps"
|
||||
:transform-data="customTransform"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<!-- 使用 bodyCell 插槽自定义单元格渲染 -->
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action' || column.dataIndex === 'action'">
|
||||
<div class="flex">
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleSubmit([record.id])"
|
||||
v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
|
||||
>提交</a-button
|
||||
>
|
||||
<div class="table-container" ref="tableContainerRef">
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:scroll-y="500"
|
||||
:list-url="getFishDraftPage"
|
||||
:search-params="{}"
|
||||
:enable-row-selection="true"
|
||||
:get-checkbox-props="getCheckboxProps"
|
||||
:transform-data="customTransform"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<!-- 使用 bodyCell 插槽自定义单元格渲染 -->
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action' || column.dataIndex === 'action'">
|
||||
<div class="flex">
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleSubmit([record.id])"
|
||||
v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
|
||||
>提交</a-button
|
||||
>
|
||||
|
||||
<a-button
|
||||
v-hasPerm="['sjtb:import-add']"
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleEdit(record, 'edit')"
|
||||
v-if="
|
||||
record.status === 'DRAFT' ||
|
||||
record.status === 'REJECTED'
|
||||
"
|
||||
>编辑</a-button
|
||||
>
|
||||
<a-button
|
||||
v-hasPerm="['sjtb:edit-review']"
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleEdit(record, 'edit')"
|
||||
v-if="
|
||||
record.status === 'PENDING' ||
|
||||
record.status === 'REJECTED'||
|
||||
record.status === 'PENDING'
|
||||
"
|
||||
>编辑</a-button
|
||||
>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
@click="handleDelete([record.id])"
|
||||
v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
|
||||
>删除</a-button
|
||||
>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleEdit(record, 'view')"
|
||||
v-if="record.status === 'PENDING' || record.status === 'APPROVED'"
|
||||
>查看</a-button
|
||||
>
|
||||
<a-button
|
||||
v-hasPerm="['sjtb:edit-review']"
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleSuccess([record.id])"
|
||||
v-if="record.status === 'PENDING'"
|
||||
>审批</a-button
|
||||
>
|
||||
<a-button
|
||||
v-hasPerm="['sjtb:edit-review']"
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
@click="handleReject(record.id)"
|
||||
v-if="record.status === 'PENDING'"
|
||||
>驳回</a-button
|
||||
>
|
||||
</div>
|
||||
<a-button
|
||||
v-hasPerm="['sjtb:import-add']"
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleEdit(record, 'edit')"
|
||||
v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
|
||||
>编辑</a-button
|
||||
>
|
||||
<a-button
|
||||
v-hasPerm="['sjtb:edit-review']"
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleEdit(record, 'edit')"
|
||||
v-if="
|
||||
record.status === 'PENDING' ||
|
||||
record.status === 'REJECTED' ||
|
||||
record.status === 'PENDING'
|
||||
"
|
||||
>编辑</a-button
|
||||
>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
@click="handleDelete([record.id])"
|
||||
v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
|
||||
>删除</a-button
|
||||
>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleEdit(record, 'view')"
|
||||
v-if="record.status === 'PENDING' || record.status === 'APPROVED'"
|
||||
>查看</a-button
|
||||
>
|
||||
<a-button
|
||||
v-hasPerm="['sjtb:edit-review']"
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleSuccess([record.id])"
|
||||
v-if="record.status === 'PENDING'"
|
||||
>审批</a-button
|
||||
>
|
||||
<a-button
|
||||
v-hasPerm="['sjtb:edit-review']"
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
@click="handleReject(record.id)"
|
||||
v-if="record.status === 'PENDING'"
|
||||
>驳回</a-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</BasicTable>
|
||||
</div>
|
||||
<!-- 隐藏的文件输入框 -->
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
@ -574,7 +575,9 @@ const handleReject = (id: any) => {
|
||||
// 多选禁用
|
||||
const getCheckboxProps = (record: any) => {
|
||||
return {
|
||||
disabled: [!checkPerm(['sjtb:edit-review'])&&"PENDING", "APPROVED"].includes(record.status),
|
||||
disabled: [!checkPerm(["sjtb:edit-review"]) && "PENDING", "APPROVED"].includes(
|
||||
record.status
|
||||
),
|
||||
};
|
||||
};
|
||||
// 多选
|
||||
@ -849,8 +852,10 @@ const fileTableaAnalysis = (res: any, type: string) => {
|
||||
list = res.data.result.failedRowDetails.concat(res.data.result.successRowDetails);
|
||||
}
|
||||
list.sort((a: any, b: any) => {
|
||||
const keyA = a.rowIndex !== undefined && a.rowIndex !== null ? Number(a.rowIndex) : -1;
|
||||
const keyB = b.rowIndex !== undefined && b.rowIndex !== null ? Number(b.rowIndex) : -1;
|
||||
const keyA =
|
||||
a.rowIndex !== undefined && a.rowIndex !== null ? Number(a.rowIndex) : -1;
|
||||
const keyB =
|
||||
b.rowIndex !== undefined && b.rowIndex !== null ? Number(b.rowIndex) : -1;
|
||||
return keyA - keyB;
|
||||
});
|
||||
|
||||
@ -1062,9 +1067,33 @@ const closeMediaPreview = () => {
|
||||
currentMediaIndex.value = 0;
|
||||
});
|
||||
};
|
||||
const tableContainerRef = ref<HTMLElement | null>(null)
|
||||
const tableScrollY = ref<number | undefined>(undefined)
|
||||
// 计算表格主体高度（减去表头、分页器、内边距等）
|
||||
const calcTableScrollY = () => {
|
||||
if (!tableContainerRef.value) return
|
||||
// 获取容器高度
|
||||
const containerHeight = tableContainerRef.value.clientHeight
|
||||
console.log(containerHeight)
|
||||
// 估算表头（约 55px） + 分页器（约 64px） + 上下内边距容差（10px） = 约 130px
|
||||
// 如果你有筛选栏等，需要额外减去
|
||||
const otherHeight = 112
|
||||
const y = containerHeight - otherHeight
|
||||
tableScrollY.value = y > 0 ? y : undefined
|
||||
}
|
||||
|
||||
// 监听容器大小变化（窗口 resize 或内容变化）
|
||||
const observer = new ResizeObserver(() => {
|
||||
calcTableScrollY()
|
||||
})
|
||||
// --- 生命周期 ---
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
calcTableScrollY()
|
||||
if (tableContainerRef.value) {
|
||||
observer.observe(tableContainerRef.value)
|
||||
}
|
||||
})
|
||||
getDictItemsByCode({ dictCode: "direction" }).then((res) => {
|
||||
direction.value = res.data;
|
||||
});
|
||||
@ -1080,6 +1109,19 @@ onMounted(() => {
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
box-sizing: border-box; /* 防止 padding 撑大高度 */
|
||||
overflow: hidden; /* 防止整个页面出现滚动条 */
|
||||
}
|
||||
.search-container {
|
||||
flex-shrink: 0; /* 搜索栏不压缩 */
|
||||
}
|
||||
.table-container {
|
||||
flex: 1; /* 占据剩余所有空间 */
|
||||
overflow: hidden; /* 关键：防止表格溢出容器 */
|
||||
position: relative; /* 为绝对定位元素提供参考（如果需要） */
|
||||
}
|
||||
.media-list-container {
|
||||
background-color: rgb(234, 241, 251);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user