admin_new P0+P1 全批次合并 (84 commits) #2
@ -22,7 +22,7 @@
|
|||||||
* </template>
|
* </template>
|
||||||
* </DataTable>
|
* </DataTable>
|
||||||
*/
|
*/
|
||||||
import { computed } from 'vue'
|
import { computed, nextTick, ref, watch, onMounted } from 'vue'
|
||||||
|
|
||||||
interface Column {
|
interface Column {
|
||||||
prop?: string
|
prop?: string
|
||||||
@ -88,10 +88,42 @@ function onSelectionChange(rows: any[]) { emit('selection-change', rows) }
|
|||||||
function onRowClick(row: any) { emit('row-click', row) }
|
function onRowClick(row: any) { emit('row-click', row) }
|
||||||
function onPageChange(p: number) { emit('page-change', p) }
|
function onPageChange(p: number) { emit('page-change', p) }
|
||||||
function onLimitChange(l: number) { emit('limit-change', l) }
|
function onLimitChange(l: number) { emit('limit-change', l) }
|
||||||
|
|
||||||
|
// W17.8.2: 表格自动撑满 (列总宽 < 容器宽时, 给最后一列加 minWidth 填满差额)
|
||||||
|
// 解决大视口下列少导致右侧大面积空白
|
||||||
|
const tableRef = ref<HTMLElement | null>(null)
|
||||||
|
const lastColMinWidth = ref<number>(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' })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="rr-data-table" :class="{ borderless }">
|
<div ref="tableRef" class="rr-data-table" :class="{ borderless }">
|
||||||
<el-table
|
<el-table
|
||||||
:data="data"
|
:data="data"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
@ -138,7 +170,7 @@ function onLimitChange(l: number) { emit('limit-change', l) }
|
|||||||
:prop="col.type === 'status' || col.slot ? undefined : col.prop"
|
:prop="col.type === 'status' || col.slot ? undefined : col.prop"
|
||||||
:label="col.label"
|
:label="col.label"
|
||||||
:width="col.width"
|
:width="col.width"
|
||||||
:min-width="col.minWidth"
|
:min-width="idx === columns.length - 1 && lastColMinWidth > 0 ? Math.max(Number(col.minWidth) || 0, lastColMinWidth) : col.minWidth"
|
||||||
:align="col.align || 'left'"
|
:align="col.align || 'left'"
|
||||||
:fixed="col.fixed"
|
:fixed="col.fixed"
|
||||||
:show-overflow-tooltip="true"
|
:show-overflow-tooltip="true"
|
||||||
|
|||||||
@ -536,7 +536,7 @@ onMounted(() => { load(); loadCustomers() })
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.rr-openapi-app { max-width: 1400px; }
|
.rr-openapi-app { max-width: 100%; }
|
||||||
|
|
||||||
/* PageHeader/SearchBar 接管 */
|
/* PageHeader/SearchBar 接管 */
|
||||||
/* PageHeader/SearchBar 接管 */
|
/* PageHeader/SearchBar 接管 */
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user