ag-grid-vue 26.2.1滚动功能失效问题求助

DevOps 小满

2026-7-15

ag-Grid-Vue滚动功能失效的修复方案

问题核心分析

从你提供的代码来看，滚动失效主要由两个关键配置冲突导致：

domLayout: 'autoHeight' 会让网格高度完全适配当前页的行内容，配合pagination: true和每页7行的设置，网格高度刚好容纳内容，自然不会触发垂直滚动。
父容器的宽高仅在移动端媒体查询中设置，桌面端无限制，导致网格撑满内容无滚动空间。

具体修复步骤

1. 移除`domLayout: 'autoHeight'`配置

修改gridOptions，删除该属性，让网格依赖父容器的高度来限制自身尺寸：

gridOptions: {
    rowSelection: 'multiple',
    suppressRowClickSelection: true,
    pagination: true,
    paginationPageSize: 7,
    // 移除domLayout: 'autoHeight'
    rowBuffer: 10,
    suppressHorizontalScroll: false,
    suppressNoRowsOverlay: true,
    suppressLoadingOverlay: true
},

2. 全局设置父容器宽高

将容器的宽高设置从移动端媒体查询中提取到全局，保证所有设备下网格都有固定的滚动空间：

.ag-grid-container {
    width: 100%;
    height: 600px; /* 根据业务需求调整高度 */
    overflow: hidden; /* 禁用父容器滚动，让ag-Grid内部处理滚动条 */
}

@media (max-width: 768px){
    .ag-grid-container {
        height: 400px; /* 移动端适配高度 */
    }
}

3. 修正列配置语法错误

你的columnDefs中Actions列未闭合，会导致列解析异常，同时建议给该列设置固定宽度，避免flex布局影响水平滚动：

columnDefs: [
    { 
        headerName: ' ', 
        field: 'checkbox', 
        suppressSizeToFit: true, 
        checkboxSelection: true,
        headerCheckboxSelection: true, 
        maxWidth: 50, 
        editable: true, 
        sortable: false
    },
    { headerName: 'ID', field: 'Id', maxWidth: 100, sort:'asc' },
    { headerName: 'Name', field: 'Name'},
    { headerName: 'Ownership', field: 'Ownership' },
    { headerName: 'Owner', field: 'Owner' },
    {
        headerName: 'Actions',
        field: 'addButton',
        cellRenderer: this.buttonsCellRenderer,
        cellStyle: { 'text-align': 'left' },
        maxWidth: 150 // 固定Actions列宽度，避免挤压其他列
    } // 补上闭合括号
],

4. 验证ag-Grid样式引入

确保项目中正确引入了ag-Grid的基础样式和主题样式，缺失样式会导致滚动条不显示或布局错乱：

<!-- 基础样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/26.2.1/styles/ag-grid.css">
<!-- 主题样式（根据你的agGridTheme调整） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/26.2.1/styles/ag-theme-alpine.css">

5. 按需选择分页或滚动模式

如果需要分页+当前页内容滚动：保留pagination: true，确保容器高度小于单页内容总高度（比如设置容器高度为300px，每页7行高度超过300px）。
如果需要无分页滚动加载所有数据：将pagination: true改为pagination: false，数据超过容器高度时会自动触发垂直滚动。

修正后的完整代码示例

模板部分

<div :class="['ag-grid-container', agGridTheme]">
    <ag-grid-vue 
        ref="agGridReport" 
        @grid-ready="onGridReady"  
        :defaultColDef="defaultColDef" 
        :columnDefs="columnDefsReport"
        :rowData="tableItems" 
        :gridOptions="gridOptions" 
        @rowClicked="onReportsRowClickedAgGrid"
        @selectionChanged="onCheckboxValueChanged" 
        :paginationNumberFormatter="paginationNumberFormatter"
        @first-data-rendered="onFirstDataRendered">
    </ag-grid-vue>
</div>

列与网格配置

columnDefsReport: [
    { 
        headerName: ' ', 
        field: 'checkbox', 
        suppressSizeToFit: true, 
        checkboxSelection: true,
        headerCheckboxSelection: true, 
        maxWidth: 50, 
        editable: true, 
        sortable: false
    },
    { headerName: 'ID', field: 'Id', maxWidth: 100, sort:'asc' },
    { headerName: 'Name', field: 'Name'},
    { headerName: 'Ownership', field: 'Ownership' },
    { headerName: 'Owner', field: 'Owner' },
    {
        headerName: 'Actions',
        field: 'addButton',
        cellRenderer: this.buttonsCellRenderer,
        cellStyle: { 'text-align': 'left' },
        maxWidth: 150
    }
],
defaultColDef: {
    editable: true,
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1,
    cellDataType: false
},
gridOptions: {
    rowSelection: 'multiple',
    suppressRowClickSelection: true,
    pagination: true,
    paginationPageSize: 7,
    rowBuffer: 10,
    suppressHorizontalScroll: false,
    suppressNoRowsOverlay: true,
    suppressLoadingOverlay: true
},

CSS部分

.ag-grid-container {
    width: 100%;
    height: 600px;
    overflow: hidden;
}

@media (max-width: 768px){
    .ag-grid-container {
        height: 400px;
    }
}

内容的提问来源于stack exchange，提问作者Tsegazeab