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

【问题标题】：A problem with keeping column width in ag-Grid在 ag-Grid 中保持列宽的问题
【发布时间】：2022-01-10 22:44:27
【问题描述】：

我有自己的计算列宽的算法，并希望它不变，但是 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>

【问题讨论】：

标签： ag-grid

【解决方案1】：

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

当目标是填充剩余的空白时使用而不是宽度网格空间

从您的defaultColDef 中删除flex: 1。

见here。

【讨论】：