1. 滚动需求背后的设计思路拆解前阵子在改一套后台管理系统的数据看板vxe-grid 表格里塞了几千条明细一开始表格直接把外层容器撑破滚动条拉得看不到底表头跟着页面一起滚走翻数据翻得人眼晕。后来把表格改成“表头固定 数据区独立滚动”整体体验一下子就上来了。很多人一拿到 vxe-grid 就急着写列配置和 data 绑定等到数据量上来了才发现页面滚动、表格滚动、弹窗滚动的各种问题混在一起完全不知道卡在哪。这篇文章就把我实际改过的几种滚动方案、配置参数、以及踩过的坑一次性说清楚以 vxe-table 4.x 版本为例适合正在用 vxe-grid 排表格、又对滚动行为拿不准的朋友。先说一个核心结论vxe-grid 的滚动并不是依赖浏览器原生页面滚动而是组件内部有一套独立的滚动容器。你要决定的是——到底让“页面”来滚还是让“表格”自己滚。这个决定权一旦想明白后面所有配置都不会乱。1.1 先搞清楚 vxe-grid 的滚动到底由什么控制vxe-grid 是 vxe-table 提供的一种带栅格布局能力的表格封装最终渲染的仍然是 vxe-table 表格。它内部有三个区域需要区分顶部区域可以放工具栏toolbar、表单form这部分默认不参与表格内部滚动中间区域表格的主体部分包含表头和 body滚动行为主要发生在这里底部区域分页pager、汇总栏这部分默认也固定在底部不跟着滚动。所以当你说“页面需要有上下滑动功能”实际上有两种做法让外层页面自然滚动整个表格块作为一个整体在页面里上下移动让表格内部的数据区滚动表头固定、分页码固定只有数据行在可视区域内上下切换。前者适合数据量不大、表格不需要固定表头的场景后者适合数据多、需要时刻看到列名、需要固定底部操作按钮的场景。1.2 height 与 max-height 的本质区别vxe-grid 控制滚动最核心的两个属性是height和max-height很多滚动问题都是在这里翻车的。height给表格设置一个固定高度值。表格主体区高度被锁死无论数据多少超出部分都会在表格内部出现纵向滚动条。max-height给表格设置一个最大高度。数据少时表格自动收缩到内容高度数据超过设置值时才出现内部滚动条。这两个属性判断逻辑不同视觉效果差别很大属性数据少时数据多时对页面滚动的影响不设置自然撑开表格不断变高页面被撑长由页面滚动接管height表格固定高度内部留白固定高度内部产生滚动条表格外部不滚动max-height表格高度自适应高度被限制内部产生滚动条数据多时表格区域不再撑高我自己的习惯是如果表格外层容器高度不确定优先用max-height保底如果外层是固定高度的 flex 布局就直接用height100%配合父容器约束。2. 四种高频场景的滚动实现方案这一节对应实际项目里最常见的四种情况每一套我都完整跑过配置可以直接抄。2.1 场景一表格不固定高度整个页面自然滚动这是最简单的方式也是很多人刚接手时默认的状态。vxe-grid 不设置height、max-height表格内容多高它就撑多高整个文档流把页面撑出滚动条。代码写法其实没什么特别的template vxe-grid :datatableData :columnscolumns :bordertrue :stripetrue / /template这种方案只适合两类情况一是表格数据量不大比如几十行二是表格只是页面内容的一部分页面本身就需要整体滚动浏览例如在长表单后面嵌一个明细表。这里有个容易踩的坑父容器如果有overflow: hidden表格会被裁掉一部分而且看不到任何滚动条看起来就像页面“滚不动”。排查时一定要先看外层容器有没有把 overflow 限制住。2.2 场景二表头固定表格内部滚动这是后台管理系统中用得最多的一种。表格数据多时页面整体不滚动表格内部出现滚动条表头固定不动。实现方式是在 vxe-grid 上设置height或max-heighttemplate vxe-grid refgridRef :heighttableHeight :datatableData :columnscolumns :bordertrue :show-overflowtrue / /templatetableHeight可以是固定数字const tableHeight ref(560)也可以直接传百分数字符串vxe-grid height100% ... /不过这里有个前提height100%要生效父容器必须有一个确定的高度。如果父容器只是自然撑开的高度百分比高度就无法计算表格会退回内容自适应。我第一次用100%时以为父容器有高度就行结果父容器本身的高度也是内容撑出来的宽度和高度全乱了白白排查了很久。vxe-grid 对height的传参类型支持String | Number数字会直接当像素值处理字符串会被当作 CSS 高度值内部换算。建议数据处理前先确认变量是数字不要传null或undefined否则表格会渲染成无高度状态让页面接管滚动和预期完全相反。2.3 场景三表格自适应窗口高度外层只有个容器壳后台页面常见布局是左侧菜单、右侧内容面板面板内的表格希望“贴着浏览器窗口走”窗口高度变了表格跟着伸缩窗口拉大表格变高窗口缩小表格出现滚动条。这种场景我用过两套方案方案一固定偏移量计算import { ref, onMounted, onBeforeUnmount } from vue const tableHeight ref(600) function calcTableHeight() { const container document.querySelector(.table-container) if (!container) return const rect container.getBoundingClientRect() // 头部分区预留兜底给工具栏、分页、边距留出空间 const offset 96 tableHeight.value Math.floor(rect.height - offset) } onMounted(() { calcTableHeight() window.addEventListener(resize, calcTableHeight) }) onBeforeUnmount(() { window.removeEventListener(resize, calcTableHeight) })方案二使用容器实际占位用getBoundingClientRect().top和window.innerHeight做差得出表格容器底部到可视区底部的真实可用空间function recalc() { const el document.querySelector(.grid-wrapper) if (!el) return const top el.getBoundingClientRect().top tableHeight.value Math.floor(window.innerHeight - top - 110) }这里额外留出的 110px是我实际项目中工具栏、分页和边距的固定占用汇总。不同系统预留值不一样最稳妥的做法是把表格放到一个已知高度的 flex 容器中直接用height100%省掉反复加减预留值的麻烦。用 flex 布局的方式大概是这样的div classpage-flex div classtoolbar查询条件区/div div classflex-1 vxe-grid height100% ... / /div div classpager分页条/div /div.page-flex { height: calc(100vh - 64px); display: flex; flex-direction: column; } .flex-1 { flex: 1; min-height: 0; display: flex; flex-direction: column; }min-height: 0这行很关键。flex 子项默认min-height: auto即使设置了flex: 1内容太多时仍然会把父容器撑大表格的height100%也就失去了参照。加上min-height: 0后子容器才会严格收缩表格滚动依赖的高度才真正稳定。2.4 场景四弹窗或抽屉内嵌表格只在弹窗内部滚动弹窗场景比页面容器更容易出问题。弹窗本身高度有限表格数据一多容易把弹窗撑爆或者弹窗滚动、表格滚动混合在一起鼠标滚轮一滚两层都跟着动。我的处理原则是弹窗最外层做成 flex 纵向布局底部放分页或操作按钮中间表格区域占剩余空间表格内部自己滚动。template div classdrawer-body div classdrawer-toolbar !-- 筛选条件 -- /div vxe-grid :heightgridHeight :datatableData :columnscolumns / div classdrawer-footer vxe-pager :current-pagepageVO.currentPage :page-sizepageVO.pageSize :totalpageVO.total / /div /div /template关键还是 gridHeight 怎么算。弹窗刚打开时内容是异步加载的此时容器宽高可能还没稳定直接在onMounted里计算容易拿到一个偏小的值。我的做法是等弹窗动画结束后在nextTick里再算一次import { nextTick } from vue function openDrawer() { visible.value true nextTick(() { visible.value true calcDrawerTableHeight() }) } function calcDrawerTableHeight() { const body document.querySelector(.drawer-body) if (!body) return const rect body.getBoundingClientRect() const toolbarHeight document.querySelector(.drawer-toolbar)?.offsetHeight ?? 0 const footerHeight document.querySelector(.drawer-footer)?.offsetHeight ?? 0 gridHeight.value Math.floor(rect.height - toolbarHeight - footerHeight - 24) }如果弹窗里有搜索表单搜索表单展开和收起时高度会变化此时也要主动触发一次高度重算否则表格底部会被截断或者留出大面积空白。我把这个逻辑抽成了一个公共方法每次表单展开收起的回调里调用一遍效果一直挺稳的。3. 数据量极大时滚动性能与虚拟滚动配置表格滚动不只是“能不能滚”的问题还有“滚起来卡不卡”的问题。几千行数据时非虚拟滚动还能扛一扛到几万行甚至十万行时每个滚动帧都要渲染全部行数据浏览器直接掉帧操作跟手是不可能的。3.1 scroll-y 虚拟滚动的核心参数vxe-grid 开启纵向虚拟滚动非常简单vxe-grid :scroll-y{ enabled: true, gt: 1000, mode: wheel } :heighttableHeight :datatableData :columnscolumns /三个参数的解释enabled是否启用虚拟滚动设置为true表示开启gt数据行数超过多少行才启用虚拟滚动。比如设为 1000只有超过 1000 行时虚拟滚动才生效数据量少时保持普通渲染mode滚动模式默认是wheel指的是鼠标滚轮滚动时视图同步的触发节流方式还有一个debounce模式滚动结束后才重新渲染可视区性能更好但视觉上会有轻微延迟感。用虚拟滚动之后表格只渲染可视区域内的行滚动条滑过的部分其实都是空占位。体验上几乎感觉不到数据量差异但浏览器内存占用和渲染帧率会好看很多。虚拟滚动有一项硬性要求必须给表格设置明确的高度使用height而不是max-height。因为虚拟滚动依赖固定视口高度来计算可渲染行数max-height在内容不满和内容超出时行为不一致会让滚动条计算错乱。这一点官方文档没有刻意强调我也是在一个动态行数场景里把max-height换成height之后才彻底稳下来。3.2 开启虚拟滚动后哪些功能会受限虚拟滚动是通过只渲染可视行实现的某些依赖全量行数据的功能天然就受限。我实测下来有几点要注意展开行type: expand默认统一展开时会失效需要结合row-config的展开状态和自定义展开区域来适配树形表格tree-config虚拟滚动的兼容性相对较差容易在展开节点时出现行错位合并单元格span-method单元格合并依赖跨行数据计算虚拟滚动下做逻辑判断时拿到的行上下文可能不在当前可视区内单元格内自定义插槽如果插槽内容里有很重的组件比如日期选择器、大图预览滚动时频繁创建销毁仍然会有卡顿建议配合scroll-y的gt阈值策略让中小数据量时保持普通渲染。如果你的表恰好又需要虚拟滚动又需要这些复杂功能我一般会退一步处理数据量控制在 5000 行以内时不启用虚拟滚动只优化列渲染超过 5000 行再考虑虚拟滚动并评估那些受限功能的影响范围。3.3 纵向滚动与固定列的配合表格列很多时通常左侧固定关键列右侧固定操作列中间区域横向滚动。配合纵向滚动需要确认固定列区域在滚动时不会错位。固定列通过fixed: left或fixed: right配置const columns [ { field: id, title: ID, width: 120, fixed: left }, { field: name, title: 名称, width: 200 }, // 中间很多列 { field: action, title: 操作, width: 180, fixed: right } ]纵向滚动时固定列区域会保持原位中间列上下滚动这是 vxe-table 默认行为一般不会出问题。容易出问题的反而是横向滚动条出现后底部滚动条占用的空间挤占了纵向滚动条导致固定列和表头的宽度计算出现 1px~2px 的偏移。碰到这类情况我第一个看的是版本更新记录vxe-table 各版本在固定列与滚动条宽度同步上修过多次升级到最新稳定版大概率能解决。项目内不方便升级的话可以用grid.refresh()在数据加载完成后重置一次滚动区域宽度状态。3.4 滚动位置的监听与还原有些业务场景需要记住用户滚动到的位置比如从列表页跳详情再返回补丁时希望表格停留在之前浏览的行位置。vxe-grid 支持监听表格滚动事件vxe-grid scrollhandleScroll ... /const scrollState { top: 0, left: 0 } function handleScroll({ scrollTop, scrollLeft }) { // 节流写入不要每次都直接同步到后端 scrollState.top scrollTop scrollState.left scrollLeft }数据恢复之后可以调用滚动相关的 api 回到记录的位置。不同版本 api 名有差异我用的是scrollTo(scrollTop, scrollLeft)如果找不到这个方法可以在gridRef.value上打印一下查看当前实例暴露的可用方法名再调用。这里要注意恢复滚动位置必须在数据渲染完成之后执行否则虚拟滚动模式下可视区还没建立位置恢复不会生效。建议在数据更新后加nextTick再执行。4. 常见滚动问题排查与避坑经验滚动问题很少只有一个原因往往是“外层容器高度 表格高度配置 数据渲染时机”三个环节互相影响最终表现为“滚不动”“滚得跳”“滚动错位”。我整理了项目中实际遇到的高频问题和处理方式先给一张速查表再逐个展开说。问题现象可能原因处理办法页面完全不能上下滚动设置了 height但实际未生效且外层 overflow 被隐藏检查 height 传值是否为 null/undefined去掉外层 overflow: hidden表格没滚动页面整体被撑长没有设置 height/max-height按需求决定内部滚动或页面滚动height 设了 100%表格仍然不滚父容器没有明确高度flex 子项 min-height 自动撑开父容器设固定高度或 calcflex 子项加 min-height: 0虚拟滚动无效使用了 max-height 而非 heightgt 阈值设得比数据量大换成 height调低 gt 阈值弹窗打开时表格高度计算偏小弹窗动画未结束、容器尺寸未稳定在 nextTick 后再计算监听弹窗状态变化固定列与滚动条宽度错位固定列与 scrollbar 宽度计算冲突升级版本调用 refresh 重置宽度状态表格滚动但表头不固定height 设置失败或数据量未超过高度确认 height 值类型与容器布局滚动时有明显卡顿掉帧数据量大且未开虚拟滚动插槽渲染过重开启 scroll-y优化插槽内容考虑下行分页4.1 页面“滚不动”的经典误判有一次同事跟我说表格设置了height: 500但页面还是能整体上下滑动完全没有内部滚动的效果。我去看代码问题是height绑定的是一个响应式变量初始值写成undefined数据接口返回后才设置成 500但赋值时机太晚表格已经渲染过一轮内部滚动容器没有拿到新的高度配置于是退回了无高度状态。这种问题的排查思路很简单把绑定的变量打印出来看表格渲染那一刻它到底是什么值。更多时候不是 API 不会用而是数据异步返回后没有主动触发表格更新。可以在数据加载完成后调用一次nextTick(() { gridRef.value?.refresh() })4.2 max-height 撑开页面时怎么处理max-height的行为很容易让人误解它只在内容超过最大值时才启用内部滚动。如果数据很少表格高度收缩到内容高度此时页面就会变短外层占位区域可能出现高度跳动。很多场景下这没问题但如果你希望整个区块的高度始终保持一致比如卡片布局里多卡片对齐max-height就不适用应该改用固定height。我遇到过的情况是同一个卡片里放了两个表格一个数据多一个数据少用max-height后两卡片高度不一致界面看起来歪歪扭扭。最后统一改成固定height才拉平了视觉表现。4.3 弹窗内表格滚动时的焦点问题在抽屉或弹窗里嵌表格滚轮滚动时有一个高频 bug鼠标悬停在表格上时滚动的是表格内部鼠标移到弹窗空白处时滚动的是弹窗外部。两层滚动混在一起用户很容易觉得“手一抖滚过头了”。我的做法是弹窗最外层本身不需要滚动的时候直接把弹窗 body 的overflow-y设为hidden让滚动行为完全收敛到表格内部。如果弹窗里除了表格还有其他内容需要滚动就明确划分区域不要让同一滚动轴上存在多个可滚动容器。4.4 用 padding 预留滚动条宽度还是用 overlayWindows 和 macOS 的滚动条样式不同。Windows 默认滚动条占位宽度约 15px~17pxmacOS 默认 overlay 悬浮式滚动条不占空间。在固定列场景下Windows 下更容易出现列错位因为滚动条出现后主体宽度变窄固定列宽度和表头需要额外补偿。如果不想和滚动条宽度较劲最简单的方案是给表格主体设置scrollbar相关配置或自定义全局滚动条样式把滚动条宽度统一。vxe-table 有相关配置项可以在表格内部通过 css 变量或者组件配置来统一各端表现。项目只在内部浏览器使用时直接指定滚动条宽 8px能省掉大多数错位问题.vxe-table--body ::-webkit-scrollbar { width: 8px; height: 8px; } .vxe-table--body ::-webkit-scrollbar-thumb { border-radius: 4px; background: #c1c1c1; }注意这段样式要写在自己的样式域内避免影响页面其他滚动区域。4.5 多表格联动滚动与数据刷新的经验如果页面上有多个 vxe-grid 需要保持纵向滚动同步比如左侧是汇总表右侧是明细表可以监听左侧表格的scroll事件把scrollTop同步给右侧表格。但直接同步容易产生循环触发我一般加一个单向标志位let syncing false function handleLeftScroll({ scrollTop }) { if (syncing) return syncing true rightGridRef.value?.scrollTo(scrollTop, 0) syncing false }数据刷新后如果表格行数变化导致滚动位置越界也需要做一次兜底判断比如把scrollTop限制在 0 和新数据最大可滚动值之间避免出现空白区域。关于这块最后再分享一个小细节vxe-grid 在数据量中等级别时2000 行以内不一定非要开虚拟滚动但一定要保证表格容器高度计算稳定。我见过很多项目在高度计算这里反复跳其实根源就是窗口 resize 事件没有清理或者getBoundingClientRect取得的容器对象不是表格真正所在的那层。每次改完滚动相关逻辑建议用浏览器无痕窗口模拟小分辨率和大分辨率各看一遍很多隐藏问题立马现形。我的经验是表格滚动方案没有统一的银弹核心是先判断清楚“表格在布局中的角色”再去选height、max-height、虚拟滚动这些工具顺序反了后面要返工的概率就会大很多。
1. 滚动需求背后的设计思路拆解前阵子在改一套后台管理系统的数据看板vxe-grid 表格里塞了几千条明细一开始表格直接把外层容器撑破滚动条拉得看不到底表头跟着页面一起滚走翻数据翻得人眼晕。后来把表格改成“表头固定 数据区独立滚动”整体体验一下子就上来了。很多人一拿到 vxe-grid 就急着写列配置和 data 绑定等到数据量上来了才发现页面滚动、表格滚动、弹窗滚动的各种问题混在一起完全不知道卡在哪。这篇文章就把我实际改过的几种滚动方案、配置参数、以及踩过的坑一次性说清楚以 vxe-table 4.x 版本为例适合正在用 vxe-grid 排表格、又对滚动行为拿不准的朋友。先说一个核心结论vxe-grid 的滚动并不是依赖浏览器原生页面滚动而是组件内部有一套独立的滚动容器。你要决定的是——到底让“页面”来滚还是让“表格”自己滚。这个决定权一旦想明白后面所有配置都不会乱。1.1 先搞清楚 vxe-grid 的滚动到底由什么控制vxe-grid 是 vxe-table 提供的一种带栅格布局能力的表格封装最终渲染的仍然是 vxe-table 表格。它内部有三个区域需要区分顶部区域可以放工具栏toolbar、表单form这部分默认不参与表格内部滚动中间区域表格的主体部分包含表头和 body滚动行为主要发生在这里底部区域分页pager、汇总栏这部分默认也固定在底部不跟着滚动。所以当你说“页面需要有上下滑动功能”实际上有两种做法让外层页面自然滚动整个表格块作为一个整体在页面里上下移动让表格内部的数据区滚动表头固定、分页码固定只有数据行在可视区域内上下切换。前者适合数据量不大、表格不需要固定表头的场景后者适合数据多、需要时刻看到列名、需要固定底部操作按钮的场景。1.2 height 与 max-height 的本质区别vxe-grid 控制滚动最核心的两个属性是height和max-height很多滚动问题都是在这里翻车的。height给表格设置一个固定高度值。表格主体区高度被锁死无论数据多少超出部分都会在表格内部出现纵向滚动条。max-height给表格设置一个最大高度。数据少时表格自动收缩到内容高度数据超过设置值时才出现内部滚动条。这两个属性判断逻辑不同视觉效果差别很大属性数据少时数据多时对页面滚动的影响不设置自然撑开表格不断变高页面被撑长由页面滚动接管height表格固定高度内部留白固定高度内部产生滚动条表格外部不滚动max-height表格高度自适应高度被限制内部产生滚动条数据多时表格区域不再撑高我自己的习惯是如果表格外层容器高度不确定优先用max-height保底如果外层是固定高度的 flex 布局就直接用height100%配合父容器约束。2. 四种高频场景的滚动实现方案这一节对应实际项目里最常见的四种情况每一套我都完整跑过配置可以直接抄。2.1 场景一表格不固定高度整个页面自然滚动这是最简单的方式也是很多人刚接手时默认的状态。vxe-grid 不设置height、max-height表格内容多高它就撑多高整个文档流把页面撑出滚动条。代码写法其实没什么特别的template vxe-grid :datatableData :columnscolumns :bordertrue :stripetrue / /template这种方案只适合两类情况一是表格数据量不大比如几十行二是表格只是页面内容的一部分页面本身就需要整体滚动浏览例如在长表单后面嵌一个明细表。这里有个容易踩的坑父容器如果有overflow: hidden表格会被裁掉一部分而且看不到任何滚动条看起来就像页面“滚不动”。排查时一定要先看外层容器有没有把 overflow 限制住。2.2 场景二表头固定表格内部滚动这是后台管理系统中用得最多的一种。表格数据多时页面整体不滚动表格内部出现滚动条表头固定不动。实现方式是在 vxe-grid 上设置height或max-heighttemplate vxe-grid refgridRef :heighttableHeight :datatableData :columnscolumns :bordertrue :show-overflowtrue / /templatetableHeight可以是固定数字const tableHeight ref(560)也可以直接传百分数字符串vxe-grid height100% ... /不过这里有个前提height100%要生效父容器必须有一个确定的高度。如果父容器只是自然撑开的高度百分比高度就无法计算表格会退回内容自适应。我第一次用100%时以为父容器有高度就行结果父容器本身的高度也是内容撑出来的宽度和高度全乱了白白排查了很久。vxe-grid 对height的传参类型支持String | Number数字会直接当像素值处理字符串会被当作 CSS 高度值内部换算。建议数据处理前先确认变量是数字不要传null或undefined否则表格会渲染成无高度状态让页面接管滚动和预期完全相反。2.3 场景三表格自适应窗口高度外层只有个容器壳后台页面常见布局是左侧菜单、右侧内容面板面板内的表格希望“贴着浏览器窗口走”窗口高度变了表格跟着伸缩窗口拉大表格变高窗口缩小表格出现滚动条。这种场景我用过两套方案方案一固定偏移量计算import { ref, onMounted, onBeforeUnmount } from vue const tableHeight ref(600) function calcTableHeight() { const container document.querySelector(.table-container) if (!container) return const rect container.getBoundingClientRect() // 头部分区预留兜底给工具栏、分页、边距留出空间 const offset 96 tableHeight.value Math.floor(rect.height - offset) } onMounted(() { calcTableHeight() window.addEventListener(resize, calcTableHeight) }) onBeforeUnmount(() { window.removeEventListener(resize, calcTableHeight) })方案二使用容器实际占位用getBoundingClientRect().top和window.innerHeight做差得出表格容器底部到可视区底部的真实可用空间function recalc() { const el document.querySelector(.grid-wrapper) if (!el) return const top el.getBoundingClientRect().top tableHeight.value Math.floor(window.innerHeight - top - 110) }这里额外留出的 110px是我实际项目中工具栏、分页和边距的固定占用汇总。不同系统预留值不一样最稳妥的做法是把表格放到一个已知高度的 flex 容器中直接用height100%省掉反复加减预留值的麻烦。用 flex 布局的方式大概是这样的div classpage-flex div classtoolbar查询条件区/div div classflex-1 vxe-grid height100% ... / /div div classpager分页条/div /div.page-flex { height: calc(100vh - 64px); display: flex; flex-direction: column; } .flex-1 { flex: 1; min-height: 0; display: flex; flex-direction: column; }min-height: 0这行很关键。flex 子项默认min-height: auto即使设置了flex: 1内容太多时仍然会把父容器撑大表格的height100%也就失去了参照。加上min-height: 0后子容器才会严格收缩表格滚动依赖的高度才真正稳定。2.4 场景四弹窗或抽屉内嵌表格只在弹窗内部滚动弹窗场景比页面容器更容易出问题。弹窗本身高度有限表格数据一多容易把弹窗撑爆或者弹窗滚动、表格滚动混合在一起鼠标滚轮一滚两层都跟着动。我的处理原则是弹窗最外层做成 flex 纵向布局底部放分页或操作按钮中间表格区域占剩余空间表格内部自己滚动。template div classdrawer-body div classdrawer-toolbar !-- 筛选条件 -- /div vxe-grid :heightgridHeight :datatableData :columnscolumns / div classdrawer-footer vxe-pager :current-pagepageVO.currentPage :page-sizepageVO.pageSize :totalpageVO.total / /div /div /template关键还是 gridHeight 怎么算。弹窗刚打开时内容是异步加载的此时容器宽高可能还没稳定直接在onMounted里计算容易拿到一个偏小的值。我的做法是等弹窗动画结束后在nextTick里再算一次import { nextTick } from vue function openDrawer() { visible.value true nextTick(() { visible.value true calcDrawerTableHeight() }) } function calcDrawerTableHeight() { const body document.querySelector(.drawer-body) if (!body) return const rect body.getBoundingClientRect() const toolbarHeight document.querySelector(.drawer-toolbar)?.offsetHeight ?? 0 const footerHeight document.querySelector(.drawer-footer)?.offsetHeight ?? 0 gridHeight.value Math.floor(rect.height - toolbarHeight - footerHeight - 24) }如果弹窗里有搜索表单搜索表单展开和收起时高度会变化此时也要主动触发一次高度重算否则表格底部会被截断或者留出大面积空白。我把这个逻辑抽成了一个公共方法每次表单展开收起的回调里调用一遍效果一直挺稳的。3. 数据量极大时滚动性能与虚拟滚动配置表格滚动不只是“能不能滚”的问题还有“滚起来卡不卡”的问题。几千行数据时非虚拟滚动还能扛一扛到几万行甚至十万行时每个滚动帧都要渲染全部行数据浏览器直接掉帧操作跟手是不可能的。3.1 scroll-y 虚拟滚动的核心参数vxe-grid 开启纵向虚拟滚动非常简单vxe-grid :scroll-y{ enabled: true, gt: 1000, mode: wheel } :heighttableHeight :datatableData :columnscolumns /三个参数的解释enabled是否启用虚拟滚动设置为true表示开启gt数据行数超过多少行才启用虚拟滚动。比如设为 1000只有超过 1000 行时虚拟滚动才生效数据量少时保持普通渲染mode滚动模式默认是wheel指的是鼠标滚轮滚动时视图同步的触发节流方式还有一个debounce模式滚动结束后才重新渲染可视区性能更好但视觉上会有轻微延迟感。用虚拟滚动之后表格只渲染可视区域内的行滚动条滑过的部分其实都是空占位。体验上几乎感觉不到数据量差异但浏览器内存占用和渲染帧率会好看很多。虚拟滚动有一项硬性要求必须给表格设置明确的高度使用height而不是max-height。因为虚拟滚动依赖固定视口高度来计算可渲染行数max-height在内容不满和内容超出时行为不一致会让滚动条计算错乱。这一点官方文档没有刻意强调我也是在一个动态行数场景里把max-height换成height之后才彻底稳下来。3.2 开启虚拟滚动后哪些功能会受限虚拟滚动是通过只渲染可视行实现的某些依赖全量行数据的功能天然就受限。我实测下来有几点要注意展开行type: expand默认统一展开时会失效需要结合row-config的展开状态和自定义展开区域来适配树形表格tree-config虚拟滚动的兼容性相对较差容易在展开节点时出现行错位合并单元格span-method单元格合并依赖跨行数据计算虚拟滚动下做逻辑判断时拿到的行上下文可能不在当前可视区内单元格内自定义插槽如果插槽内容里有很重的组件比如日期选择器、大图预览滚动时频繁创建销毁仍然会有卡顿建议配合scroll-y的gt阈值策略让中小数据量时保持普通渲染。如果你的表恰好又需要虚拟滚动又需要这些复杂功能我一般会退一步处理数据量控制在 5000 行以内时不启用虚拟滚动只优化列渲染超过 5000 行再考虑虚拟滚动并评估那些受限功能的影响范围。3.3 纵向滚动与固定列的配合表格列很多时通常左侧固定关键列右侧固定操作列中间区域横向滚动。配合纵向滚动需要确认固定列区域在滚动时不会错位。固定列通过fixed: left或fixed: right配置const columns [ { field: id, title: ID, width: 120, fixed: left }, { field: name, title: 名称, width: 200 }, // 中间很多列 { field: action, title: 操作, width: 180, fixed: right } ]纵向滚动时固定列区域会保持原位中间列上下滚动这是 vxe-table 默认行为一般不会出问题。容易出问题的反而是横向滚动条出现后底部滚动条占用的空间挤占了纵向滚动条导致固定列和表头的宽度计算出现 1px~2px 的偏移。碰到这类情况我第一个看的是版本更新记录vxe-table 各版本在固定列与滚动条宽度同步上修过多次升级到最新稳定版大概率能解决。项目内不方便升级的话可以用grid.refresh()在数据加载完成后重置一次滚动区域宽度状态。3.4 滚动位置的监听与还原有些业务场景需要记住用户滚动到的位置比如从列表页跳详情再返回补丁时希望表格停留在之前浏览的行位置。vxe-grid 支持监听表格滚动事件vxe-grid scrollhandleScroll ... /const scrollState { top: 0, left: 0 } function handleScroll({ scrollTop, scrollLeft }) { // 节流写入不要每次都直接同步到后端 scrollState.top scrollTop scrollState.left scrollLeft }数据恢复之后可以调用滚动相关的 api 回到记录的位置。不同版本 api 名有差异我用的是scrollTo(scrollTop, scrollLeft)如果找不到这个方法可以在gridRef.value上打印一下查看当前实例暴露的可用方法名再调用。这里要注意恢复滚动位置必须在数据渲染完成之后执行否则虚拟滚动模式下可视区还没建立位置恢复不会生效。建议在数据更新后加nextTick再执行。4. 常见滚动问题排查与避坑经验滚动问题很少只有一个原因往往是“外层容器高度 表格高度配置 数据渲染时机”三个环节互相影响最终表现为“滚不动”“滚得跳”“滚动错位”。我整理了项目中实际遇到的高频问题和处理方式先给一张速查表再逐个展开说。问题现象可能原因处理办法页面完全不能上下滚动设置了 height但实际未生效且外层 overflow 被隐藏检查 height 传值是否为 null/undefined去掉外层 overflow: hidden表格没滚动页面整体被撑长没有设置 height/max-height按需求决定内部滚动或页面滚动height 设了 100%表格仍然不滚父容器没有明确高度flex 子项 min-height 自动撑开父容器设固定高度或 calcflex 子项加 min-height: 0虚拟滚动无效使用了 max-height 而非 heightgt 阈值设得比数据量大换成 height调低 gt 阈值弹窗打开时表格高度计算偏小弹窗动画未结束、容器尺寸未稳定在 nextTick 后再计算监听弹窗状态变化固定列与滚动条宽度错位固定列与 scrollbar 宽度计算冲突升级版本调用 refresh 重置宽度状态表格滚动但表头不固定height 设置失败或数据量未超过高度确认 height 值类型与容器布局滚动时有明显卡顿掉帧数据量大且未开虚拟滚动插槽渲染过重开启 scroll-y优化插槽内容考虑下行分页4.1 页面“滚不动”的经典误判有一次同事跟我说表格设置了height: 500但页面还是能整体上下滑动完全没有内部滚动的效果。我去看代码问题是height绑定的是一个响应式变量初始值写成undefined数据接口返回后才设置成 500但赋值时机太晚表格已经渲染过一轮内部滚动容器没有拿到新的高度配置于是退回了无高度状态。这种问题的排查思路很简单把绑定的变量打印出来看表格渲染那一刻它到底是什么值。更多时候不是 API 不会用而是数据异步返回后没有主动触发表格更新。可以在数据加载完成后调用一次nextTick(() { gridRef.value?.refresh() })4.2 max-height 撑开页面时怎么处理max-height的行为很容易让人误解它只在内容超过最大值时才启用内部滚动。如果数据很少表格高度收缩到内容高度此时页面就会变短外层占位区域可能出现高度跳动。很多场景下这没问题但如果你希望整个区块的高度始终保持一致比如卡片布局里多卡片对齐max-height就不适用应该改用固定height。我遇到过的情况是同一个卡片里放了两个表格一个数据多一个数据少用max-height后两卡片高度不一致界面看起来歪歪扭扭。最后统一改成固定height才拉平了视觉表现。4.3 弹窗内表格滚动时的焦点问题在抽屉或弹窗里嵌表格滚轮滚动时有一个高频 bug鼠标悬停在表格上时滚动的是表格内部鼠标移到弹窗空白处时滚动的是弹窗外部。两层滚动混在一起用户很容易觉得“手一抖滚过头了”。我的做法是弹窗最外层本身不需要滚动的时候直接把弹窗 body 的overflow-y设为hidden让滚动行为完全收敛到表格内部。如果弹窗里除了表格还有其他内容需要滚动就明确划分区域不要让同一滚动轴上存在多个可滚动容器。4.4 用 padding 预留滚动条宽度还是用 overlayWindows 和 macOS 的滚动条样式不同。Windows 默认滚动条占位宽度约 15px~17pxmacOS 默认 overlay 悬浮式滚动条不占空间。在固定列场景下Windows 下更容易出现列错位因为滚动条出现后主体宽度变窄固定列宽度和表头需要额外补偿。如果不想和滚动条宽度较劲最简单的方案是给表格主体设置scrollbar相关配置或自定义全局滚动条样式把滚动条宽度统一。vxe-table 有相关配置项可以在表格内部通过 css 变量或者组件配置来统一各端表现。项目只在内部浏览器使用时直接指定滚动条宽 8px能省掉大多数错位问题.vxe-table--body ::-webkit-scrollbar { width: 8px; height: 8px; } .vxe-table--body ::-webkit-scrollbar-thumb { border-radius: 4px; background: #c1c1c1; }注意这段样式要写在自己的样式域内避免影响页面其他滚动区域。4.5 多表格联动滚动与数据刷新的经验如果页面上有多个 vxe-grid 需要保持纵向滚动同步比如左侧是汇总表右侧是明细表可以监听左侧表格的scroll事件把scrollTop同步给右侧表格。但直接同步容易产生循环触发我一般加一个单向标志位let syncing false function handleLeftScroll({ scrollTop }) { if (syncing) return syncing true rightGridRef.value?.scrollTo(scrollTop, 0) syncing false }数据刷新后如果表格行数变化导致滚动位置越界也需要做一次兜底判断比如把scrollTop限制在 0 和新数据最大可滚动值之间避免出现空白区域。关于这块最后再分享一个小细节vxe-grid 在数据量中等级别时2000 行以内不一定非要开虚拟滚动但一定要保证表格容器高度计算稳定。我见过很多项目在高度计算这里反复跳其实根源就是窗口 resize 事件没有清理或者getBoundingClientRect取得的容器对象不是表格真正所在的那层。每次改完滚动相关逻辑建议用浏览器无痕窗口模拟小分辨率和大分辨率各看一遍很多隐藏问题立马现形。我的经验是表格滚动方案没有统一的银弹核心是先判断清楚“表格在布局中的角色”再去选height、max-height、虚拟滚动这些工具顺序反了后面要返工的概率就会大很多。
