agGrid自定义列显示格式cellRenderer

列定义中设置cellRenderer

columnDefs:[
          {
            //序号
            headerName: "序号",
            width: 50,
            pinned:"left",
            valueGetter:params=>parseInt(params.node.id)+1,
          },
          {
            headerName: "导入状态",
            width: 50,
            field: "status",
            pinned:"left",
            cellRenderer: this.getStatusCellRenderer(),
            cellStyle:function(){
            return {
              'padding-left':'0px',
              'padding-right':'0px'
            }
          }]

getStatusCellRenderer() {
  function SimpleCellRenderer() {}
  SimpleCellRenderer.prototype.init = function(params) {
    this.eGui = document.createElement('div');
    this.eGui.style['text-align']='center'
    switch(params.value){
      case 0:
        this.eGui.innerHTML = '正常';
        break;
      case -1:
        this.eGui.innerHTML = '异常';
        this.eGui.style['background-color']='#FF9800'
        break;    
      default:
        this.eGui.innerHTML = params.value;
      break 
    }
    // console.log(this.eGui.innerHTML )
  };
  SimpleCellRenderer.prototype.getGui = function() {
    return this.eGui;
  };
  return SimpleCellRenderer;
},

预览