@ -1,13 +1,17 @@
@@ -1,13 +1,17 @@
< template >
< div class = "list-table-v2" :style ="containerStyle" >
<!-- Mini hidden table for measuring row height ( only when using dynamic height mode ) -- >
<!-- This mirrors the real table ' s cell rendering for accurate height estimation -- >
< div v-if ="shouldUseProbeRow" ref="miniTableRef" class="mini-table" aria-hidden="true" >
< div v-if ="miniTableData.length > 0" class="mini-table-inner" >
< div v-for ="(row, idx) in miniTableData" :key="idx" class="mini-row" >
< div v-for ="item in prop.columns || []" :key="item.key" class="mini-cell" >
< span class = "mini-cell-content" >
{ { getProbeCellText ( row , item ) } }
< / span >
< div v-for ="(row, rowIdx) in miniTableData" :key="rowIdx" class="mini-row" >
< div
v - for = "item in prop.columns || []"
: key = "item.key"
class = "mini-cell"
: style = "getMiniCellStyle(item)"
>
< MiniCellRenderer :item ="item" :row ="row" :slots ="slots" / >
< / div >
< / div >
< / div >
@ -448,6 +452,56 @@ const tableColumns = computed(() => {
@@ -448,6 +452,56 @@ const tableColumns = computed(() => {
return col ;
} ) ;
} ) ;
/ / M i n i c e l l r e n d e r e r - m i r r o r s t h e r e a l t a b l e ' s c e l l R e n d e r e r f o r f a i t h f u l h e i g h t e s t i m a t i o n
const MiniCellRenderer = ( props : { item : TableColumn ; row : any ; slots : ReturnType < typeof useSlots > } ) => {
const { item , row , slots } = props ;
const slotName = item . key ;
/ / I f c o l u m n h a s s l o t = t r u e , r e n d e r t h e p a r e n t ' s s l o t c o n t e n t
if ( item . slot && slots [ slotName ] ) {
return renderSlot ( slots , slotName , { row } ) ;
}
const value = lodash . get ( row , item . dataKey || item . key ) ;
/ / H a n d l e t i m e s t a m p d i s p l a y u s i n g T z D a t e T i m e c o m p o n e n t
if ( item . timestamp ) {
const tzProps = resolveTimestampProps ( item . timestamp ) ;
if ( tzProps ) {
const { valueFormat , valueTz , displayFormat , locale , type } = tzProps ;
return (
< TzDateTime
value = { value }
valueFormat = { valueFormat }
valueTz = { valueTz }
displayFormat = { displayFormat }
locale = { locale }
type = { type }
/ >
) ;
}
}
/ / H a n d l e d i c t d i s p l a y
if ( item . dict ) {
return < span > { formatterByDist ( item . dict , value ) } < / span > ;
}
/ / H a n d l e f o r m a t t i n g
const formatted = formatCellValue ( value , item , row ) ;
return < span > { formatted } < / span > ;
} ;
/ / G e t m i n i c e l l s t y l e - m i r r o r s t h e r e a l t a b l e ' s c o l u m n w i d t h / f l e x d i s t r i b u t i o n
const getMiniCellStyle = ( item : TableColumn ) : Record < string , string > => {
if ( item . width !== undefined ) {
const w = typeof item . width === "number" ? item . width : parseInt ( String ( item . width ) ) || 120 ;
return { width : ` ${ w } px ` , flex : "none" } ;
}
/ / U s e f l e x : 1 t o a u t o - e x p a n d c o l u m n s t o f i l l a v a i l a b l e w i d t h ( s a m e a s f l e x G r o w : 1 )
return { flex : "1" , minWidth : "120px" } ;
} ;
< / script >
< style lang = "scss" scoped >
@ -466,8 +520,7 @@ const tableColumns = computed(() => {
@@ -466,8 +520,7 @@ const tableColumns = computed(() => {
pointer - events : none ;
left : - 9999 px ;
top : 0 ;
width : 100 % ; / / W i d t h r e s p o n d s t o p a r e n t c o n t a i n e r
max - width : 100 % ;
width : 100 % ;
}
. mini - table - inner {
@ -485,28 +538,16 @@ const tableColumns = computed(() => {
@@ -485,28 +538,16 @@ const tableColumns = computed(() => {
background : v - bind ( "state.style.tableBg" ) ;
color : v - bind ( "state.style.tableColor" ) ;
box - sizing : border - box ;
overflow : hidden ;
}
. mini - cell {
flex : 1 ;
min - width : 120 px ;
padding - right : 8 px ;
box - sizing : border - box ;
overflow : hidden ;
text - overflow : ellipsis ;
white - space : nowrap ;
}
/ / F l e x g r o w c o l u m n s m a t c h t h e r e a l t a b l e ' s f l e x d i s t r i b u t i o n
. mini - cell : nth - child ( 1 ) { flex : 1 ; min - width : 120 px ; }
. mini - cell : nth - child ( 2 ) { flex : 1 ; min - width : 120 px ; }
. mini - cell : nth - child ( 3 ) { flex : 1 ; min - width : 120 px ; }
. mini - cell : nth - child ( 4 ) { flex : 1 ; min - width : 120 px ; }
. mini - cell : nth - child ( 5 ) { flex : 1 ; min - width : 120 px ; }
. mini - cell : nth - child ( 6 ) { flex : 1 ; min - width : 120 px ; }
. mini - cell : nth - child ( 7 ) { flex : 1 ; min - width : 120 px ; }
. mini - cell : nth - child ( 8 ) { flex : 1 ; min - width : 120 px ; }
. mini - cell - content {
overflow : hidden ;
text - overflow : ellipsis ;