如何在Vue+ag-grid中按指定字符数设置列宽？

由于你的数据格式固定，api.autoSizeColumns()会额外预留 padding 或根据表头/样式分配冗余空间，导致列宽超出需求，直接针对固定字符数的列设置精确宽度更高效，以下是两种可行方案：

方案1：基于字符数计算精确像素宽度 #

ag-grid列宽单位为像素，可根据单元格字体属性计算对应宽度：

• 先确认单元格字体（如默认14px Arial），等宽字体下单个字符宽度一致，非等宽字体可取平均宽度（14px字体下约8-9px/字符）
• 需额外加上单元格默认左右内边距（默认各10px，共20px）
• 代码示例：

<template>
  <ag-grid-vue
    :columnDefs="columnDefs"
    :rowData="rowData"
    @grid-ready="onGridReady"
  ></ag-grid-vue>
</template>

<script setup>
import { ref } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';

const columnDefs = ref([
  // 3个字符 + 20px内边距：3*9 + 20 = 47px
  { field: 'col1', width: 47 },
  { field: 'col2', flex: 1 }, // 其他列自适应剩余空间
  // 1个字符 + 20px内边距：1*9 + 20 = 29px
  { field: 'colN', width: 29 }
]);

const rowData = ref([/* 你的固定格式数据 */]);

const onGridReady = (params) => {
  // 无需调用autoSizeColumns()
};
</script>

若单元格有自定义样式（如加粗、特殊字体），可直接在浏览器控制台查看字符实际渲染宽度，微调计算值。

方案2：自动调整后手动修正列宽 #

如果必须使用自动调整功能，可在autoSizeColumns()执行后手动覆盖目标列宽度：

const onGridReady = (params) => {
  // 先执行自动调整
  params.api.autoSizeColumns();
  // 手动修正固定字符列宽度
  params.api.setColumnWidth('col1', 47);
  params.api.setColumnWidth('colN', 29);
};

额外优化：使用等宽字体 #

给单元格设置等宽字体（如monospace），可让字符宽度完全一致，进一步提升列宽精准度：

.ag-cell {
  font-family: monospace;
  font-size: 14px;
}

内容的提问来源于stack exchange，提问作者I2mNew