VueJS - 在 ag-grid-vue 中将列/表格调整到屏幕的任何宽度

Posted 2023-03-28

【中文标题】VueJS - 在 ag-grid-vue 中将列/表格调整到屏幕的任何宽度

【英文标题】：VueJS - Flexed columns / fitting table to any width of the screen in ag-grid-vue

【发布时间】：2021-05-11 18:49:45

【问题描述】：

我正在使用 Ag-grid 来显示表格，我希望让我的表格具有响应性。

所以我试图让整个表格/整个列适应屏幕的宽度：

如果屏幕宽度小于 500 像素，那么我想让 x 轴可滚动，否则整个表格/整个列都应该适合屏幕。

这里是代码框：

https://codesandbox.io/s/priceless-khorana-bw55b

最初表格是这样留下空间的：

我也在mounted中试过这个：

mounted () 
    this.gridApi = this.gridOptions.api.sizeColumnsToFit()

当我减小屏幕宽度并使用 sizeColumnsToFit() 时，我得到下面的图像：

但 sizeColumnsToFit() 在屏幕宽度已满时可以正常工作。

我还参考了 ag-grid 的文档，找到了以下链接：

https://plnkr.co/edit/YG7be1X8kAgeSEas，这就是我要找的东西，我也尝试了与示例相同的方法，但不知道为什么我不能让我的表像那样响应。

所以，请帮助我使我的桌子适合屏幕的宽度。随着宽度不断减小，如果它小于 500 像素，那么我想让它可滚动。然后，我也想减少列之间的空间，所以它变得容易适合表格。

【参考方案1】：

每次网格大小发生变化时，使用网格事件gridSizeChanged 调用一个函数。在此函数中，如果您的网格大小超过 500 像素，请调用 sizeColumnsToFit 自动调整列的大小，否则，将每列调整为更合理的宽度，例如300像素;

onGridSizeChanged(params) 
      if (params.clientWidth > 500) 
        this.gridApi.sizeColumnsToFit();
       else 
        this.columnDefs.forEach(x => 
          x.width = 300;
        );
        this.gridApi.setColumnDefs(this.columnDefs);
      
    ,

Demo.

为了减少列之间的空间，使用defaultColDef从单元格中删除填充，并将标题的ag-header-cell类的填充设置为0

Demo.

【讨论】：

非常感谢:)，现在如何减少列之间的空间？

使用defaultColDef 删除单元格的填充，并将标题ag-header-cell 类的填充设置为0，Demo。