ag-grid-vue表格的一些问题总结（三）

最新推荐文章于 2025-06-08 20:10:18 发布

一只成长的程序猿

最新推荐文章于 2025-06-08 20:10:18 发布

阅读量1.6k

点赞数

分类专栏： ag-grid-vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44548681/article/details/122545417

版权

ag-grid-vue 专栏收录该内容

3 篇文章

订阅专栏

本文总结了ag-grid-vue表格的三个高级特性：如何实现表格的纵向和横向合并，表格表头的分组，以及表格行的可展开功能。这些技巧将帮助开发者提升ag-grid-vue表格的展示效果和交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ag-grid-vue表格的一些问题总结（三）

1.表格合并纵向和横向

//左右合并
//绑定的表头加入colSpan属性
 {
    field: 'country',
    colSpan: function (params) {
      const country = params.data.country;
      if (country === 'Russia') {
        // have all Russia age columns width 2
        return 2;//合并2个
      } else if (country === 'United States') {
        // have all United States column width 4
        return 4;//合并4个
      } else {
        // all other rows should be just normal
        return 1;//合并1个
      }
    },
  },

//上下合并
 {
    field: 'show',
    cellRenderer: 'showCellRenderer',
    rowSpan: rowSpan,
    cellClassRules: {
      'show-cell': 'value !== undefined',
    },
    width: 200,
  },
  //在methods里边写rowSpan方法
  function rowSpan(params) {
  if (params.data.show) {
    return 4;
  } else {
    return 1;
  }
}

2.表格表头分组

  columnDefs: [
        {
            headerName: 'Athlete Details',
            children: [
                { field: 'athlete' },
                { field: 'age' },
                { field: 'country' },
            ]
        },
        {
            headerName: 'Sports Results',
            children: [
                { field: 'sport' },
                { field: 'total', columnGroupShow: 'closed' },
                { field: 'gold', columnGroupShow: 'open' },
                { field: 'silver', columnGroupShow: 'open' },
                { field: 'bronze', columnGroupShow: 'open' },
            ]
        }
    ],