VueJS - 灵活的列/适合 table 到 ag-grid-vue 中屏幕的任何宽度

Question

我正在使用 Ag-grid 来显示 table，我想让我的 table 响应。

所以我试图使整个 table/ 整列适合屏幕的宽度：

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

这是代码框：

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

最初 table 离开 space 是这样的：

我也在安装中试过这个：

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

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

但是当屏幕宽度满时 sizeColumnsToFit() 工作正常。

我也参考了ag-grid的文档，发现如下link:

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

所以，请帮助我使 table 适合屏幕的宽度。随着宽度不断减小，如果它小于 500px，那么我想让它滚动。然后，我还想减少列之间的 space，这样就很容易适应 table.

Answer 1

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

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

Demo.

为了减少列之间的space，使用defaultColDef从单元格中删除填充，并将ag-header-cell [=25=的填充设置为0 ] 对于 headers

Demo.

VueJS - 灵活的列/适合 table 到 ag-grid-vue 中屏幕的任何宽度

VueJS - Flexed columns / fitting table to any width of the screen in ag-grid-vue

width

vue.js

ag-grid