AG Grid：如何让可编辑列单元格直观显示可编辑状态？

• 通过cellClass配置添加专属样式
  在列定义中指定自定义类名，给可编辑单元格添加区分度高的样式，比如浅背景、虚线边框或光标提示：

  columnDefs = [
    { 
      headerName: '可编辑列', 
      field: 'editableField', 
      editable: true,
      cellClass: 'editable-cell'
    },
    // 其他列配置...
  ];
  

  对应的CSS样式：

  .editable-cell {
    background-color: #f8f9fa;
    border-bottom: 1px dashed #6c757d;
    cursor: text;
  }
  

• 利用cellStyle直接内联样式
  无需额外CSS文件，直接在列定义中写内联样式，适合简单的视觉提示场景：

  columnDefs = [
    { 
      headerName: '可编辑列', 
      field: 'editableField', 
      editable: true,
      cellStyle: {
        backgroundColor: '#f8f9fa',
        cursor: 'pointer'
      }
    }
  ];
  

• 自定义单元格渲染组件
  如果需要更直观的提示（比如显示编辑图标），可以自定义渲染组件：

  1. 创建渲染组件：

  import { Component } from '@angular/core';
  import { ICellRendererAngularComp } from 'ag-grid-angular';
  
  @Component({
    template: `
      <div class="editable-cell-wrap">
        {{ value }}
        <span class="edit-icon">✏️</span>
      </div>
    `,
    styles: [`
      .editable-cell-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
      }
      .edit-icon {
        color: #007bff;
        font-size: 14px;
        opacity: 0.7;
      }
    `]
  })
  export class EditableCellRenderer implements ICellRendererAngularComp {
    value: any;
  
    agInit(params: any): void {
      this.value = params.value;
    }
  
    refresh(params: any): boolean {
      this.value = params.value;
      return true;
    }
  }
  

  2. 在列定义和模块中配置：

  // 列定义
  columnDefs = [
    { 
      headerName: '可编辑列', 
      field: 'editableField', 
      editable: true,
      cellRendererFramework: EditableCellRenderer
    }
  ];
  
  // 模块声明
  @NgModule({
    declarations: [EditableCellRenderer],
    imports: [AgGridModule.withComponents([EditableCellRenderer])]
  })
  

• 用getCellClass实现动态样式
  如果只有部分行的单元格可编辑，可通过getCellClass根据行数据动态添加样式：

  columnDefs = [
    { 
      headerName: '条件可编辑列', 
      field: 'conditionalField',
      editable: (params) => params.data.canEdit,
      getCellClass: (params) => params.data.canEdit ? 'editable-cell' : ''
    }
  ];
  

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