diff --git a/src/components/DataTable/DataTable.vue b/src/components/DataTable/DataTable.vue index b2aebf3..c2e68ff 100644 --- a/src/components/DataTable/DataTable.vue +++ b/src/components/DataTable/DataTable.vue @@ -22,7 +22,7 @@ * * */ -import { computed } from 'vue' +import { computed, nextTick, ref, watch, onMounted } from 'vue' interface Column { prop?: string @@ -88,10 +88,42 @@ function onSelectionChange(rows: any[]) { emit('selection-change', rows) } 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 填满差额) +// 解决大视口下列少导致右侧大面积空白 +const tableRef = ref(null) +const lastColMinWidth = ref(0) + +async function autoFillTable() { + await nextTick() + // 双重 nextTick 等待列渲染 + await nextTick() + const el = tableRef.value + if (!el) return + const table = el.querySelector('.el-table') as HTMLElement | null + if (!table) return + const containerW = el.clientWidth + const tableW = table.scrollWidth + if (tableW >= containerW - 4) { + lastColMinWidth.value = 0 + return + } + // 差额 + 一些 buffer (避免 border 抖动) + const diff = containerW - tableW + 4 + lastColMinWidth.value = diff +} + +onMounted(() => { + autoFillTable() + window.addEventListener('resize', autoFillTable) +}) + +watch(() => props.data, () => autoFillTable(), { flush: 'post' }) +watch(() => props.columns, () => autoFillTable(), { flush: 'post' })