緊湊型表格的方式)
在后臺管理系統(tǒng)的數(shù)據(jù)展示場景中信息密度與可讀性往往是一對矛盾。普通表格行高充裕、視覺舒適但一屏可見的數(shù)據(jù)行數(shù)有限緊湊型表格則能在有限空間內(nèi)展示更多數(shù)據(jù)尤其適合大屏監(jiān)控、批量操作、數(shù)據(jù)對比等場景。vxe-table 提供了靈活的單元格尺寸定制能力允許開發(fā)者精確控制行高與內(nèi)邊距快速構建緊湊型表格。本文將詳細講解其配置方式、性能優(yōu)化策略以及關鍵注意事項幫助您在高密度與用戶體驗之間取得最佳平衡。核心配置cellConfig.height 與 paddingvxe-table 通過 cellConfig 對象控制單元格的尺寸與內(nèi)邊距屬性類型說明cellConfig.heightnumber單元格高度單位 px默認值為 22標準行高cellConfig.padding.top / bottomboolean是否啟用上下內(nèi)邊距默認為 true即 10px 左右內(nèi)邊距。設為 false 可進一步壓縮緊湊型配置示例constcellConfigreactive({height:30,// 行高 30px推薦可編輯表格最小值padding:{top:false,// 移除上內(nèi)邊距bottom:false// 移下下內(nèi)邊距}})尺寸建議官方推薦純展示型列表單元格高度不低于 22px默認值低于該值可能導致布局錯亂或文字截斷?？删庉嫳砀窈斎肟?、選擇器等控件單元格高度不低于 30px確保標準控件如 VxeInput能完整顯示且可操作。若設置 height 低于 22px還需額外調整 CSS 變量 --vxe-ui-table-row-line-height見后文。代碼templatedivdivvxe-buttonclickloadList(10000)加載1萬行/vxe-buttonvxe-buttonclickloadList(30000)加載3萬行/vxe-buttonvxe-buttonclickloadList(50000)加載5萬行/vxe-buttonvxe-buttonclickloadList(100000)加載10萬行/vxe-buttonvxe-buttonclickloadList(200000)加載20萬行/vxe-button/divdiv高度vxe-radio-groupv-modelcellConfig.heightvxe-radio-button:checked-value22content22px/vxe-radio-buttonvxe-radio-button:checked-value26content26px/vxe-radio-buttonvxe-radio-button:checked-value30content30px/vxe-radio-buttonvxe-radio-button:checked-value34content34px/vxe-radio-buttonvxe-radio-button:checked-value38content38px/vxe-radio-button/vxe-radio-group/divvxe-gridrefgridRefclassmy-compact-tablev-bindgridOptions/vxe-grid/div/templatescriptsetupimport{ref,onMounted,reactive}fromvueimport{VxeUI}fromvxe-tableconstgridRefref()constcellConfigreactive({padding:{top:false,bottom:false},height:30})constgridOptionsreactive({border:true,loading:false,showOverflow:true,size:mini,height:800,cellConfig,mouseConfig:{area:true,// 是否開啟區(qū)域選取extension:false},toolbarConfig:{custom:true},keyboardConfig:{arrowCursorLock:true,// 方向鍵光標鎖開啟后處于非聚焦式編輯狀態(tài)將支持在編輯狀態(tài)中通過方向鍵切換單元格。切換為聚焦編輯狀態(tài)可以按 F2 鍵或者鼠標左鍵點擊輸入框就可以用方向鍵左右移動輸入框的光標isClip:true,// 是否開啟復制粘貼isArrow:true,// 是否開啟方向鍵功能isShift:true,// 是否開啟同時按住方向鍵以活動區(qū)域為起始向指定方向擴展單元格區(qū)域isTab:true,// 是否開啟 Tab 鍵功能isEnter:true,// 是否開啟回車鍵功能isEsc:true,// 是否開啟Esc鍵關閉編輯功能isFNR:true// 是否開啟查找與替換},virtualYConfig:{enabled:true,// 是否開啟縱向虛擬滾動gt:0// 指定大于指定行時自動啟動縱向虛擬滾動如果為 0 則總是啟用},columns:[{type:seq,width:80},{type:checkbox,width:60},{field:a,title:A,width:140},{field:b,title:B,width:180},{field:c,title:C,width:120},{field:d,title:D,width:180},{field:e,title:E,width:100},{field:f,title:F,width:120},{field:g,title:G,width:120},{field:h,title:H,width:140},{field:i,title:I,width:180},{field:j,title:J,width:180},{field:k,title:K,width:180},{field:l,title:L,width:120},{field:m,title:M,width:120},{field:n,title:N,width:140},{field:o,title:O,width:70},{field:p,title:P,width:80},{field:q,title:Q,width:100},{field:s,title:S,width:150},{field:t,title:T,width:120}]})constloadList(rowSize100,isMsgtrue){gridOptions.loadingtruesetTimeout((){const$gridgridRef.valueconstlist[]for(leti0;irowSize;i){list.push({id:10001i,a:Test${i},b:Develop,c:Man,d:${10i},e:${(10i)%66},f:Shengzhen,g:,h:h${i},i:i${i},j:j${i},k:k${i},l:l${i}})}if($grid){conststartTimeDate.now()$grid.reloadData(list).then((){if(isMsg){VxeUI.modal.message({content:加載時間${Date.now()-startTime}毫秒,status:success})}gridOptions.loadingfalse})}else{gridOptions.loadingfalse}},200)}onMounted((){loadList(200,false)})/scriptstylelangscssscoped// .my-compact-table{//--vxe-ui-table-row-line-height:18px;// 當單元格高度低于默認 22px 時需要同時修改默認行高 css 變量例如18px //}/style關鍵點行高與 CSS 變量的聯(lián)動當 cellConfig.height 設置值小于默認的 22px 時僅調整 JS 配置還不夠因為表格內(nèi)部的行高還受 CSS 變量 --vxe-ui-table-row-line-height 控制。必須同步修改該變量否則單元格內(nèi)容垂直對齊會錯位。示例.my-compact-table{--vxe-ui-table-row-line-height:18px;// 與 cellConfig.height 保持一致}若行高 ≥ 22px則無需額外設置因為默認行高就是 22px且組件內(nèi)部會自動適配?？删庉嫳砀竦淖畹透叨热舯砀裰惺褂昧溯斎肟颉⑾吕?、日期選擇器等編輯控件editRender建議高度不低于 30px否則控件顯示不全或無法交互。官方推薦的可編輯表格最小高度即為 30px。性能優(yōu)化——虛擬滾動必開緊湊型表格往往用于展示大量數(shù)據(jù)virtualYConfig 是保證流暢性的核心。示例中設置了 enabled: true 和 gt: 0即數(shù)據(jù)量 0 時自動啟用虛擬滾動僅渲染可視區(qū)域的行大幅減少 DOM 節(jié)點。列寬與內(nèi)容溢出緊湊行高下單元格寬度若不足文本可能被截斷showOverflow: true 會顯示省略號。建議合理設置列寬width 或 minWidth或通過 ellipsis 配置自定義提示。交互反饋緊湊型表格的行高變矮鼠標點擊區(qū)域也隨之縮小若開啟編輯或選區(qū)功能需確保操作熱區(qū)足夠大?？赏ㄟ^ mouseConfig.area 開啟區(qū)域選取并配合鍵盤操作提升效率。適用場景與取舍場景推薦行高是否啟用 padding備注純展示性列表監(jiān)控大屏、數(shù)據(jù)概覽22~26px移除padding: false最大化信息密度常規(guī)管理列表帶操作按鈕、狀態(tài)標簽30~34px保留或移除視情況兼顧操作舒適度可編輯表格單元格內(nèi)嵌輸入框≥30px保留確?？丶山换ゲ豢傻陀?30px復雜表格含多行文本、換行自適應showOverflow: false按需此時不使用緊湊型動態(tài)切換行高通過將 cellConfig.height 綁定為響應式變量并配合單選按鈕組用戶可隨時切換行高適應不同場景。vxe-table 會自動檢測配置變化并重新渲染無需額外代碼。vxe-table 通過 cellConfig.height 和 padding 提供了精細的行高控制能力讓開發(fā)者能夠輕松構建緊湊型表格在有限空間內(nèi)展示更多數(shù)據(jù)。配合虛擬滾動和合理的最小高度建議即可實現(xiàn)高密度、高性能、可交互的表格方案。實際項目中建議根據(jù)業(yè)務場景選擇合適的行高并在用戶界面提供切換入口兼顧不同用戶的使用習慣。https://vxetable.cn vue 表格組件vxe-table 實現(xiàn)緊湊型表格的方式
在后臺管理系統(tǒng)的數(shù)據(jù)展示場景中信息密度與可讀性往往是一對矛盾。普通表格行高充裕、視覺舒適但一屏可見的數(shù)據(jù)行數(shù)有限緊湊型表格則能在有限空間內(nèi)展示更多數(shù)據(jù)尤其適合大屏監(jiān)控、批量操作、數(shù)據(jù)對比等場景。vxe-table 提供了靈活的單元格尺寸定制能力允許開發(fā)者精確控制行高與內(nèi)邊距快速構建緊湊型表格。本文將詳細講解其配置方式、性能優(yōu)化策略以及關鍵注意事項幫助您在高密度與用戶體驗之間取得最佳平衡。核心配置cellConfig.height 與 paddingvxe-table 通過 cellConfig 對象控制單元格的尺寸與內(nèi)邊距屬性類型說明cellConfig.heightnumber單元格高度單位 px默認值為 22標準行高cellConfig.padding.top / bottomboolean是否啟用上下內(nèi)邊距默認為 true即 10px 左右內(nèi)邊距。設為 false 可進一步壓縮緊湊型配置示例constcellConfigreactive({height:30,// 行高 30px推薦可編輯表格最小值padding:{top:false,// 移除上內(nèi)邊距bottom:false// 移下下內(nèi)邊距}})尺寸建議官方推薦純展示型列表單元格高度不低于 22px默認值低于該值可能導致布局錯亂或文字截斷?？删庉嫳砀窈斎肟?、選擇器等控件單元格高度不低于 30px確保標準控件如 VxeInput能完整顯示且可操作。若設置 height 低于 22px還需額外調整 CSS 變量 --vxe-ui-table-row-line-height見后文。代碼templatedivdivvxe-buttonclickloadList(10000)加載1萬行/vxe-buttonvxe-buttonclickloadList(30000)加載3萬行/vxe-buttonvxe-buttonclickloadList(50000)加載5萬行/vxe-buttonvxe-buttonclickloadList(100000)加載10萬行/vxe-buttonvxe-buttonclickloadList(200000)加載20萬行/vxe-button/divdiv高度vxe-radio-groupv-modelcellConfig.heightvxe-radio-button:checked-value22content22px/vxe-radio-buttonvxe-radio-button:checked-value26content26px/vxe-radio-buttonvxe-radio-button:checked-value30content30px/vxe-radio-buttonvxe-radio-button:checked-value34content34px/vxe-radio-buttonvxe-radio-button:checked-value38content38px/vxe-radio-button/vxe-radio-group/divvxe-gridrefgridRefclassmy-compact-tablev-bindgridOptions/vxe-grid/div/templatescriptsetupimport{ref,onMounted,reactive}fromvueimport{VxeUI}fromvxe-tableconstgridRefref()constcellConfigreactive({padding:{top:false,bottom:false},height:30})constgridOptionsreactive({border:true,loading:false,showOverflow:true,size:mini,height:800,cellConfig,mouseConfig:{area:true,// 是否開啟區(qū)域選取extension:false},toolbarConfig:{custom:true},keyboardConfig:{arrowCursorLock:true,// 方向鍵光標鎖開啟后處于非聚焦式編輯狀態(tài)將支持在編輯狀態(tài)中通過方向鍵切換單元格。切換為聚焦編輯狀態(tài)可以按 F2 鍵或者鼠標左鍵點擊輸入框就可以用方向鍵左右移動輸入框的光標isClip:true,// 是否開啟復制粘貼isArrow:true,// 是否開啟方向鍵功能isShift:true,// 是否開啟同時按住方向鍵以活動區(qū)域為起始向指定方向擴展單元格區(qū)域isTab:true,// 是否開啟 Tab 鍵功能isEnter:true,// 是否開啟回車鍵功能isEsc:true,// 是否開啟Esc鍵關閉編輯功能isFNR:true// 是否開啟查找與替換},virtualYConfig:{enabled:true,// 是否開啟縱向虛擬滾動gt:0// 指定大于指定行時自動啟動縱向虛擬滾動如果為 0 則總是啟用},columns:[{type:seq,width:80},{type:checkbox,width:60},{field:a,title:A,width:140},{field:b,title:B,width:180},{field:c,title:C,width:120},{field:d,title:D,width:180},{field:e,title:E,width:100},{field:f,title:F,width:120},{field:g,title:G,width:120},{field:h,title:H,width:140},{field:i,title:I,width:180},{field:j,title:J,width:180},{field:k,title:K,width:180},{field:l,title:L,width:120},{field:m,title:M,width:120},{field:n,title:N,width:140},{field:o,title:O,width:70},{field:p,title:P,width:80},{field:q,title:Q,width:100},{field:s,title:S,width:150},{field:t,title:T,width:120}]})constloadList(rowSize100,isMsgtrue){gridOptions.loadingtruesetTimeout((){const$gridgridRef.valueconstlist[]for(leti0;irowSize;i){list.push({id:10001i,a:Test${i},b:Develop,c:Man,d:${10i},e:${(10i)%66},f:Shengzhen,g:,h:h${i},i:i${i},j:j${i},k:k${i},l:l${i}})}if($grid){conststartTimeDate.now()$grid.reloadData(list).then((){if(isMsg){VxeUI.modal.message({content:加載時間${Date.now()-startTime}毫秒,status:success})}gridOptions.loadingfalse})}else{gridOptions.loadingfalse}},200)}onMounted((){loadList(200,false)})/scriptstylelangscssscoped// .my-compact-table{//--vxe-ui-table-row-line-height:18px;// 當單元格高度低于默認 22px 時需要同時修改默認行高 css 變量例如18px //}/style關鍵點行高與 CSS 變量的聯(lián)動當 cellConfig.height 設置值小于默認的 22px 時僅調整 JS 配置還不夠因為表格內(nèi)部的行高還受 CSS 變量 --vxe-ui-table-row-line-height 控制。必須同步修改該變量否則單元格內(nèi)容垂直對齊會錯位。示例.my-compact-table{--vxe-ui-table-row-line-height:18px;// 與 cellConfig.height 保持一致}若行高 ≥ 22px則無需額外設置因為默認行高就是 22px且組件內(nèi)部會自動適配?？删庉嫳砀竦淖畹透叨热舯砀裰惺褂昧溯斎肟颉⑾吕?、日期選擇器等編輯控件editRender建議高度不低于 30px否則控件顯示不全或無法交互。官方推薦的可編輯表格最小高度即為 30px。性能優(yōu)化——虛擬滾動必開緊湊型表格往往用于展示大量數(shù)據(jù)virtualYConfig 是保證流暢性的核心。示例中設置了 enabled: true 和 gt: 0即數(shù)據(jù)量 0 時自動啟用虛擬滾動僅渲染可視區(qū)域的行大幅減少 DOM 節(jié)點。列寬與內(nèi)容溢出緊湊行高下單元格寬度若不足文本可能被截斷showOverflow: true 會顯示省略號。建議合理設置列寬width 或 minWidth或通過 ellipsis 配置自定義提示。交互反饋緊湊型表格的行高變矮鼠標點擊區(qū)域也隨之縮小若開啟編輯或選區(qū)功能需確保操作熱區(qū)足夠大?？赏ㄟ^ mouseConfig.area 開啟區(qū)域選取并配合鍵盤操作提升效率。適用場景與取舍場景推薦行高是否啟用 padding備注純展示性列表監(jiān)控大屏、數(shù)據(jù)概覽22~26px移除padding: false最大化信息密度常規(guī)管理列表帶操作按鈕、狀態(tài)標簽30~34px保留或移除視情況兼顧操作舒適度可編輯表格單元格內(nèi)嵌輸入框≥30px保留確?？丶山换ゲ豢傻陀?30px復雜表格含多行文本、換行自適應showOverflow: false按需此時不使用緊湊型動態(tài)切換行高通過將 cellConfig.height 綁定為響應式變量并配合單選按鈕組用戶可隨時切換行高適應不同場景。vxe-table 會自動檢測配置變化并重新渲染無需額外代碼。vxe-table 通過 cellConfig.height 和 padding 提供了精細的行高控制能力讓開發(fā)者能夠輕松構建緊湊型表格在有限空間內(nèi)展示更多數(shù)據(jù)。配合虛擬滾動和合理的最小高度建議即可實現(xiàn)高密度、高性能、可交互的表格方案。實際項目中建議根據(jù)業(yè)務場景選擇合適的行高并在用戶界面提供切換入口兼顧不同用戶的使用習慣。https://vxetable.cn