diff --git a/src/components/DataTable/DataTable.vue b/src/components/DataTable/DataTable.vue index c2e68ff..b1ba1a0 100644 --- a/src/components/DataTable/DataTable.vue +++ b/src/components/DataTable/DataTable.vue @@ -89,10 +89,17 @@ function onRowClick(row: any) { emit('row-click', row) } function onPageChange(p: number) { emit('page-change', p) } function onLimitChange(l: number) { emit('limit-change', l) } -// W17.8.2: 表格自动撑满 (列总宽 < 容器宽时, 给最后一列加 minWidth 填满差额) +// W17.8.2: 表格自动撑满 (列总宽 < 容器宽时, 给弹性列加 minWidth 填满差额) +// W17.8.2 改: 差额加到"中间弹性列" (第一个有 minWidth 且非 fixed 的列), 不是最后一列 +// 原因: 最后一列通常是"操作列" (fixed: right, width 固定), 加差额会撑大操作列破坏布局 // 解决大视口下列少导致右侧大面积空白 const tableRef = ref(null) const lastColMinWidth = ref(0) +const flexColIdx = computed(() => { + // 优先找第一个有 minWidth 且非 fixed 的数据列 (不是 selection/status) + const idx = props.columns.findIndex(c => c.minWidth && !c.fixed && c.type !== 'selection' && c.type !== 'status') + return idx >= 0 ? idx : props.columns.length - 1 +}) async function autoFillTable() { await nextTick() @@ -170,7 +177,7 @@ watch(() => props.columns, () => autoFillTable(), { flush: 'post' }) :prop="col.type === 'status' || col.slot ? undefined : col.prop" :label="col.label" :width="col.width" - :min-width="idx === columns.length - 1 && lastColMinWidth > 0 ? Math.max(Number(col.minWidth) || 0, lastColMinWidth) : col.minWidth" + :min-width="idx === flexColIdx && lastColMinWidth > 0 ? Math.max(Number(col.minWidth) || 0, lastColMinWidth) : col.minWidth" :align="col.align || 'left'" :fixed="col.fixed" :show-overflow-tooltip="true" diff --git a/src/modules/openapi/OpenAppListView.vue b/src/modules/openapi/OpenAppListView.vue index ed07bc7..d80d74a 100644 --- a/src/modules/openapi/OpenAppListView.vue +++ b/src/modules/openapi/OpenAppListView.vue @@ -160,10 +160,12 @@ async function loadCustomers() { } const columns = [ - { prop: 'customerName', label: '客户名', minWidth: 180 }, - { prop: 'appName', label: '应用名称', minWidth: 220 }, - { prop: 'appId', label: 'AppID', minWidth: 240 }, - { prop: 'status', label: '状态', width: 100, slot: 'status' as const }, + { prop: 'customerName', label: '客户名', minWidth: 150 }, + { prop: 'appName', label: '应用名称', minWidth: 180 }, + { prop: 'appId', label: 'AppID', width: 240, showOverflowTooltip: true }, + { prop: 'scopes', label: '权限范围', minWidth: 160 }, + { prop: 'totalCallCount', label: '调用次数', width: 100, align: 'right' as const, formatter: (row: any) => row.totalCallCount ?? '--' }, + { prop: 'status', label: '状态', width: 90, slot: 'status' as const }, { prop: 'createDate', label: '创建时间', width: 170, slot: 'createDate' as const }, { prop: 'lastUsedAt', label: '最后调用', width: 170, formatter: (row: any) => fmtDate(row.lastUsedAt) }, { label: '操作', width: 160, align: 'center' as const, fixed: 'right' as const, slot: 'action' as const }