AG Grid指定列如何仅显示复选框并实现单元格内居中对齐

第一步：修改Pending列配置 #

调整你的columnDefs中Pending列的参数，从配置层面清空单元格文本内容，同时添加自定义类名用于后续样式限定，避免影响其他列：

{ 
  headerName: "Pending", 
  field: "pending", 
  sortable: true, 
  editable: true, 
  checkboxSelection: true, 
  cellStyle: () => getPageStatus(),
  // 新增以下3行配置
  valueFormatter: () => '', // 直接清空单元格文本输出，不会渲染pending字段的原始值
  cellClass: 'pending-checkbox-cell', // 给当前列单元格添加自定义类名
  headerClass: 'pending-checkbox-header' // 可选：给当前列列头添加自定义类名，单独控制列头样式
},

第二步：添加对应CSS样式 #

如果你的样式写在Vue组件内且带scoped属性，需要使用Vue3的深度选择器:deep()包裹才能对ag-grid内部元素生效：

/* 全局样式写法 */
.pending-checkbox-cell .ag-cell-wrapper {
  justify-content: center;
  padding: 0 !important; /* 覆盖ag-grid默认的单元格内边距 */
}
.pending-checkbox-cell .ag-cell-value {
  display: none; /* 兜底隐藏可能残留的文本内容 */
}

/* Vue3 scoped样式写法，替换上面的选择器即可
:deep(.pending-checkbox-cell .ag-cell-wrapper) {
  justify-content: center;
  padding: 0 !important;
}
:deep(.pending-checkbox-cell .ag-cell-value) {
  display: none;
}
*/

/* 可选：单独控制该列列头居中，避免你之前写的全局列头样式影响其他列
.pending-checkbox-header .ag-header-cell-label {
  justify-content: center;
}
*/

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