fix(detail): 参会人表撑爆 grid 修复 (left-col min-width:0 + wrap div overflow-x:auto)

This commit is contained in:
郭庆泰
2026-08-22 16:20:45 +08:00
parent 0fbe99eb1d
commit 2ae4cd3ea5
+15 -5
View File
@@ -59,10 +59,13 @@
<span class="toolbar-hint">按手机号定位; 手机号未注册将自动建 sys_user (用户名=密码=手机号)</span>
</div>
<!--
表格总宽 ~1680px (13 min-width 累加). width:100% 跟随 left-col 2fr 网格槽,
列宽超出时 el-table 内部出现横向滚动, 不挤压右侧 audit-column.
参会人表有 13 , min-width 累加 ~1680px, 直接 el-table width:100% 会撑爆 left-col
(CSS Grid item 默认 min-width:auto, 内容撑大, 导致 audit-column 被挤到 ~93px).
修复: left-col min-width:0 允许网格项缩小 el-table overflow-x:auto 容器
让内容超出时容器内出现横向滚动条, 不影响外层 grid 布局.
-->
<el-table :data="attendeeRows" v-loading="attendeeLoading" border size="small" style="width: 100%;">
<div class="attendee-table-wrap">
<el-table :data="attendeeRows" v-loading="attendeeLoading" border size="small" style="width: 100%;">
<el-table-column prop="name" label="医生" min-width="90" />
<el-table-column prop="phone" label="联系电话" width="120" />
<el-table-column prop="workUnit" label="医院" min-width="140" show-overflow-tooltip />
@@ -98,6 +101,7 @@
<span class="text-muted">暂无参会人, 点击右上"新增参会人"按手机号添加</span>
</template>
</el-table>
</div>
</div>
<div class="file-list" style="margin-top: 16px;">
@@ -952,7 +956,12 @@ onMounted(load)
.tag-list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cols-row { display: grid; grid-template-columns: 7fr 3fr; gap: 16px; align-items: flex-start; }
.left-col { display: flex; flex-direction: column; gap: 16px; }
/*
* min-width:0 是 CSS Grid 关键: 默认 grid item 的 min-width 是 auto (= 内容最小宽度),
* 参会人表 13 列 min-width 累加 ~1680px 会把 left-col 撑到 1730px, 把 audit-column 挤到 93px.
* 加 min-width:0 让 left-col 可以缩小到 7fr 的网格槽宽度.
*/
.left-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.material-tabs :deep(.el-tabs__header) { margin-bottom: 12px; }
.material-tabs :deep(.el-tabs__item) { font-size: 14px; }
@@ -995,5 +1004,6 @@ onMounted(load)
.attendee-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar-hint { font-size: 12px; color: #909399; line-height: 1.5; }
.form-hint { font-size: 12px; color: #909399; margin-top: -8px; margin-bottom: 8px; line-height: 1.5; }
/* (参会人表固定宽度已写在 el-table style 上, 不再需要 wrap div) */
/* 表格外层横向滚动容器: 内容总宽 ~1680px 超出 left-col 宽度时, 容器内出现横向滚动条, 不撑爆外层 grid */
.attendee-table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; }
</style>