在 ag-Grid 中保持列宽的问题

Question

我有自己的计算列宽的算法，希望它不变，但是 ag-Grid 调整它的大小！在搜索文档以获得所需结果的所有可用方法之后，但没有。我准备了这个纯粹的最小 html 文件来说明情况。有谁知道正确的方法吗？

</div>
<script charset="utf-8">
'use strict'

let gridOptions = {
  defaultColDef: {
    editable: true,
    sortable: true,
    flex: 1,
    minWidth: 20,
    maxWidth: 400,
    filter: true,
    resizable: false,
    suppressSizeToFit: true,
    suppressResize: true,
    headerClass: 'fixed-size-header',
  },
  columnDefs: [
  {
    "field": "id",
    "width": 80
  },
  {
    "field": "name",
    "width": 350
  },
  {
    "field": "created_at",
    "width": 140
  },
  {
    "field": "updated_at",
    "width": 140
  }
],
rowData: [
  {"id": 1,
    "name": "Mathematics",
    "created_at": "2020-04-22 10:32:13 UTC",
    "updated_at": "2020-04-22 10:32:13 UTC"
  },
  {"id": 2,
    "name": "Algebra",
    "created_at": "2020-04-22 10:32:13 UTC",
    "updated_at": "2020-04-22 10:32:13 UTC"
  } ]};

document.addEventListener('DOMContentLoaded', () => {
  const eGridDiv = document.querySelector('#GridDiv');
  new agGrid.Grid(eGridDiv, gridOptions);
});

</script>

Answer 1

您的问题是您正在使用 flex: 1。设置 flex 属性的定义是：

Used instead of width when the goal is to fill the remaining empty space of the grid

从您的 defaultColDef 中删除 flex: 1。

见here。

在 ag-Grid 中保持列宽的问题

A problem with keeping column width in ag-Grid

ag-grid