在后臺管理系統的數據展示場景中信息密度與可讀性往往是一對矛盾。普通表格行高充裕、視覺舒適但一屏可見的數據行數有限緊湊型表格則能在有限空間內展示更多數據尤其適合大屏監控、批量操作、數據對比等場景。vxe-table 提供了靈活的單元格尺寸定制能力允許開發者精確控制行高與內邊距快速構建緊湊型表格。本文將詳細講解其配置方式、性能優化策略以及關鍵注意事項幫助您在高密度與用戶體驗之間取得最佳平衡。核心配置cellConfig.height 與 paddingvxe-table 通過 cellConfig 對象控制單元格的尺寸與內邊距屬性類型說明cellConfig.heightnumber單元格高度單位 px默認值為 22標準行高cellConfig.padding.top / bottomboolean是否啟用上下內邊距默認為 true即 10px 左右內邊距。設為 false 可進一步壓縮緊湊型配置示例constcellConfigreactive({height:30,// 行高 30px推薦可編輯表格最小值padding:{top:false,// 移除上內邊距bottom:false// 移下下內邊距}})尺寸建議官方推薦純展示型列表單元格高度不低于 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,// 是否開啟區域選取extension:false},toolbarConfig:{custom:true},keyboardConfig:{arrowCursorLock:true,// 方向鍵光標鎖開啟后處于非聚焦式編輯狀態將支持在編輯狀態中通過方向鍵切換單元格。切換為聚焦編輯狀態可以按 F2 鍵或者鼠標左鍵點擊輸入框就可以用方向鍵左右移動輸入框的光標isClip:true,// 是否開啟復制粘貼isArrow:true,// 是否開啟方向鍵功能isShift:true,// 是否開啟同時按住方向鍵以活動區域為起始向指定方向擴展單元格區域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 變量的聯動當 cellConfig.height 設置值小于默認的 22px 時僅調整 JS 配置還不夠因為表格內部的行高還受 CSS 變量 --vxe-ui-table-row-line-height 控制。必須同步修改該變量否則單元格內容垂直對齊會錯位。示例.my-compact-table{--vxe-ui-table-row-line-height:18px;// 與 cellConfig.height 保持一致}若行高 ≥ 22px則無需額外設置因為默認行高就是 22px且組件內部會自動適配。可編輯表格的最低高度若表格中使用了輸入框、下拉框、日期選擇器等編輯控件editRender建議高度不低于 30px否則控件顯示不全或無法交互。官方推薦的可編輯表格最小高度即為 30px。性能優化——虛擬滾動必開緊湊型表格往往用于展示大量數據virtualYConfig 是保證流暢性的核心。示例中設置了 enabled: true 和 gt: 0即數據量 0 時自動啟用虛擬滾動僅渲染可視區域的行大幅減少 DOM 節點。列寬與內容溢出緊湊行高下單元格寬度若不足文本可能被截斷showOverflow: true 會顯示省略號。建議合理設置列寬width 或 minWidth或通過 ellipsis 配置自定義提示。交互反饋緊湊型表格的行高變矮鼠標點擊區域也隨之縮小若開啟編輯或選區功能需確保操作熱區足夠大。可通過 mouseConfig.area 開啟區域選取并配合鍵盤操作提升效率。適用場景與取舍場景推薦行高是否啟用 padding備注純展示性列表監控大屏、數據概覽22~26px移除padding: false最大化信息密度常規管理列表帶操作按鈕、狀態標簽30~34px保留或移除視情況兼顧操作舒適度可編輯表格單元格內嵌輸入框≥30px保留確保控件可交互不可低于 30px復雜表格含多行文本、換行自適應showOverflow: false按需此時不使用緊湊型動態切換行高通過將 cellConfig.height 綁定為響應式變量并配合單選按鈕組用戶可隨時切換行高適應不同場景。vxe-table 會自動檢測配置變化并重新渲染無需額外代碼。vxe-table 通過 cellConfig.height 和 padding 提供了精細的行高控制能力讓開發者能夠輕松構建緊湊型表格在有限空間內展示更多數據。配合虛擬滾動和合理的最小高度建議即可實現高密度、高性能、可交互的表格方案。實際項目中建議根據業務場景選擇合適的行高并在用戶界面提供切換入口兼顧不同用戶的使用習慣。https://vxetable.cn vue 表格組件vxe-table 實現緊湊型表格的方式
在后臺管理系統的數據展示場景中信息密度與可讀性往往是一對矛盾。普通表格行高充裕、視覺舒適但一屏可見的數據行數有限緊湊型表格則能在有限空間內展示更多數據尤其適合大屏監控、批量操作、數據對比等場景。vxe-table 提供了靈活的單元格尺寸定制能力允許開發者精確控制行高與內邊距快速構建緊湊型表格。本文將詳細講解其配置方式、性能優化策略以及關鍵注意事項幫助您在高密度與用戶體驗之間取得最佳平衡。核心配置cellConfig.height 與 paddingvxe-table 通過 cellConfig 對象控制單元格的尺寸與內邊距屬性類型說明cellConfig.heightnumber單元格高度單位 px默認值為 22標準行高cellConfig.padding.top / bottomboolean是否啟用上下內邊距默認為 true即 10px 左右內邊距。設為 false 可進一步壓縮緊湊型配置示例constcellConfigreactive({height:30,// 行高 30px推薦可編輯表格最小值padding:{top:false,// 移除上內邊距bottom:false// 移下下內邊距}})尺寸建議官方推薦純展示型列表單元格高度不低于 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,// 是否開啟區域選取extension:false},toolbarConfig:{custom:true},keyboardConfig:{arrowCursorLock:true,// 方向鍵光標鎖開啟后處于非聚焦式編輯狀態將支持在編輯狀態中通過方向鍵切換單元格。切換為聚焦編輯狀態可以按 F2 鍵或者鼠標左鍵點擊輸入框就可以用方向鍵左右移動輸入框的光標isClip:true,// 是否開啟復制粘貼isArrow:true,// 是否開啟方向鍵功能isShift:true,// 是否開啟同時按住方向鍵以活動區域為起始向指定方向擴展單元格區域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 變量的聯動當 cellConfig.height 設置值小于默認的 22px 時僅調整 JS 配置還不夠因為表格內部的行高還受 CSS 變量 --vxe-ui-table-row-line-height 控制。必須同步修改該變量否則單元格內容垂直對齊會錯位。示例.my-compact-table{--vxe-ui-table-row-line-height:18px;// 與 cellConfig.height 保持一致}若行高 ≥ 22px則無需額外設置因為默認行高就是 22px且組件內部會自動適配。可編輯表格的最低高度若表格中使用了輸入框、下拉框、日期選擇器等編輯控件editRender建議高度不低于 30px否則控件顯示不全或無法交互。官方推薦的可編輯表格最小高度即為 30px。性能優化——虛擬滾動必開緊湊型表格往往用于展示大量數據virtualYConfig 是保證流暢性的核心。示例中設置了 enabled: true 和 gt: 0即數據量 0 時自動啟用虛擬滾動僅渲染可視區域的行大幅減少 DOM 節點。列寬與內容溢出緊湊行高下單元格寬度若不足文本可能被截斷showOverflow: true 會顯示省略號。建議合理設置列寬width 或 minWidth或通過 ellipsis 配置自定義提示。交互反饋緊湊型表格的行高變矮鼠標點擊區域也隨之縮小若開啟編輯或選區功能需確保操作熱區足夠大。可通過 mouseConfig.area 開啟區域選取并配合鍵盤操作提升效率。適用場景與取舍場景推薦行高是否啟用 padding備注純展示性列表監控大屏、數據概覽22~26px移除padding: false最大化信息密度常規管理列表帶操作按鈕、狀態標簽30~34px保留或移除視情況兼顧操作舒適度可編輯表格單元格內嵌輸入框≥30px保留確保控件可交互不可低于 30px復雜表格含多行文本、換行自適應showOverflow: false按需此時不使用緊湊型動態切換行高通過將 cellConfig.height 綁定為響應式變量并配合單選按鈕組用戶可隨時切換行高適應不同場景。vxe-table 會自動檢測配置變化并重新渲染無需額外代碼。vxe-table 通過 cellConfig.height 和 padding 提供了精細的行高控制能力讓開發者能夠輕松構建緊湊型表格在有限空間內展示更多數據。配合虛擬滾動和合理的最小高度建議即可實現高密度、高性能、可交互的表格方案。實際項目中建議根據業務場景選擇合適的行高并在用戶界面提供切換入口兼顧不同用戶的使用習慣。https://vxetable.cn