如何让AgGrid单元格完整显示文本区域内容？

不需要自定义编辑器，通过调整AgGrid的默认配置就能实现你要的效果，具体设置如下：

1. 只读模式：单元格自动拉伸展示全部文本 #

在列配置中添加wrapText和autoHeight属性，让文本自动换行并自适应单元格高度：

const editableColumns: Array<ColumnType> =
  data?.nodes.map(node => ({
    suppressMenu: true,
    sortable: false,
    headerName: node.title,
    field: node.id,
    editable: true,
    cellEditor: 'agLargeTextCellEditor',
    wrapText: true, // 开启文本自动换行
    autoHeight: true // 单元格高度自适应内容
  })) ?? [];

如果希望全局所有列都生效，可以把这两个属性放到defaultColDef里，避免重复配置：

const gridOptions = {
  // ...其他全局配置
  defaultColDef: {
    wrapText: true,
    autoHeight: true
  }
};

2. 编辑模式：编辑器完整显示文本区域内容 #

针对agLargeTextCellEditor，通过cellEditorParams配置编辑器的初始尺寸，并开启自动适配：

const editableColumns: Array<ColumnType> =
  data?.nodes.map(node => ({
    suppressMenu: true,
    sortable: false,
    headerName: node.title,
    field: node.id,
    editable: true,
    cellEditor: 'agLargeTextCellEditor',
    wrapText: true,
    autoHeight: true,
    cellEditorParams: {
      rows: 8, // 编辑器初始显示行数，可按需调整
      cols: 60, // 编辑器初始列数
      autoHeight: true // 编辑器自动适配内容高度
    }
  })) ?? [];

说明 #

• wrapText: true 确保文本在只读模式下不会被截断，自动换行显示。
• autoHeight: true 让单元格（只读模式）和编辑器（编辑模式）自动拉伸高度，完整展示所有内容。
• 若autoHeight在编辑器中不生效，可适当调大rows参数的值，保证足够的初始显示空间。

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