如何实现Ag-Grid桌面端Size to Fit、移动端Auto-Size响应式适配

实现思路 #

桌面端走Size to Fit、移动端走Auto-Size的适配逻辑完全可落地，核心是通过视口宽度判断设备类型，分场景调用对应API，同时补上两个API的原生缺陷兜底，再配合窗口尺寸变化监听即可。

• 通用断点选择：参考行业常规响应式规则，以768px为界，视口宽度≥768px判定为桌面端，<768px判定为小屏移动端，可根据自身业务调整断点值。
• 缺陷兜底逻辑：
  • 桌面端调用sizeColumnsToFit()时，提前给所有列设置不小于80px的最小宽度，从根源避免极端情况下列宽被压缩为0的问题
  • 移动端调用autoSizeColumns()后，检测表格可视区域是否存在留白，若总列宽小于容器宽度，给最后一列设置弹性宽度撑满剩余空间，解决空白问题；若总列宽超出容器宽度，保留内容匹配的列宽，允许横向滚动，符合移动端操作习惯
• 触发时机：除了表格初始化完成后触发首次适配，还要给窗口resize事件加防抖后绑定适配方法，避免窗口尺寸变化时适配失效；如果存在动态显隐列、异步加载数据更新列内容的场景，操作完成后也要手动触发一次适配。

注意：sizeColumnsToFit()本身没有内置最小列宽兜底逻辑，当所有列的最小宽度之和大于网格容器宽度时，会直接把列宽压缩为0，这也是小屏下调用该方法出现异常的核心原因，不要在宽度不足的场景下使用这个API。

可直接复用的代码示例 #

// 防抖工具，避免resize事件频繁触发导致页面卡顿
const debounce = (fn, delay = 200) => {
  let timer = null
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

let gridApi = null
let gridColumnApi = null
const BREAKPOINT = 768 // 响应式断点，可按需调整

// 统一列适配逻辑
const adaptGridColumns = () => {
  if (!gridApi || !gridColumnApi) return
  const isDesktop = window.innerWidth >= BREAKPOINT
  const allColumns = gridColumnApi.getAllColumns()
  const allColumnIds = allColumns.map(col => col.getColId())

  if (isDesktop) {
    // 桌面端逻辑：sizeColumnsToFit 适配，加最小宽度兜底
    gridColumnApi.applyColumnState({
      state: allColumnIds.map(colId => ({
        colId,
        minWidth: 80,
        flex: 0 // 重置flex配置，避免影响宽度计算
      }))
    })
    gridApi.sizeColumnsToFit()
  } else {
    // 移动端逻辑：autoSizeColumns 适配，处理留白问题
    gridColumnApi.applyColumnState({
      state: allColumnIds.map(colId => ({
        colId,
        minWidth: 100, // 移动端列最小宽度设大一点，避免内容太挤
        flex: 0
      }))
    })
    gridColumnApi.autoSizeColumns(allColumnIds, false)

    // 检测是否存在留白
    const gridViewport = document.querySelector('.ag-body-viewport')
    if (gridViewport && gridViewport.scrollWidth <= gridViewport.clientWidth) {
      // 给最后一列加flex，撑满剩余空白，不影响其他列的内容适配宽度
      gridColumnApi.applyColumnState({
        state: allColumnIds.map((colId, index) => ({
          colId,
          flex: index === allColumnIds.length - 1 ? 1 : 0
        }))
      })
    }
  }
}

// 表格初始化完成回调
const onGridReady = (params) => {
  gridApi = params.api
  gridColumnApi = params.columnApi
  // 首次触发适配
  adaptGridColumns()
  // 绑定窗口resize监听
  window.addEventListener('resize', debounce(adaptGridColumns))
}

// 页面/组件销毁时移除监听，避免内存泄漏
const destroy = () => {
  window.removeEventListener('resize', debounce(adaptGridColumns))
}

补充说明 #

• 列最小宽度的值可以根据自身业务的字体大小、内容密度调整，不需要硬套示例里的数值
• 移动端列数较多时不需要强制所有列适配到一屏内，保留横向滚动的体验远好于把内容压缩到重叠、无法辨认的状态
• 如果使用的是React/Vue/Angular版本的Ag-Grid，只需要把对应的生命周期逻辑替换成框架对应写法即可，核心适配逻辑通用

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