如何按行在 Ag-grid 中添加特定组件（如输入组件），或者如何在 Ag-grid 中按行删除组件？答案

【问题标题】：How can I add particular component(like Input component) in Ag-grid by Row wise or how can i remove component by Row in Ag-grid?如何按行在 Ag-grid 中添加特定组件（如输入组件），或者如何在 Ag-grid 中按行删除组件？
【发布时间】：2019-10-12 15:44:16
【问题描述】：

如何在特定行中添加特定组件（例如 Checkbox、Input、select、下拉组件）？每当我将组件添加到列中时，它都会出现在每一行中。如何从特定行中删除组件？

 this.columnDefs1 = [ 
    {
         headerName: "M1",
         field: "m1",
         width: 90,
         cellRendererFramework: InputComponent,
         controlData: {
             type: 'text'
         },
    },
]

this.rowData1 = [
    { 
        m1: "50",
    },
    { 
        m1: "30",
    },
    { 
        m1: "",
        //If I don't want input component in this row, how can I remove? 
        //I have tried by not giving m1
        //also but its coming in whole column or every row.
    },
    { 
        m1: "20",
    },
]

您可以在链接图像中看到以供参考，我不想要最后 4 个选择组件，但我需要这些行空白：

【问题讨论】：

标签： ag-grid

【解决方案1】：

您可以使用colDef.cellRendererSelector，这是一个根据行数据选择渲染器的函数

headerName: "M1",
field: "m1",
width: 90,
cellRendererSelector: function (params) { 
    if (params.data.m1) {
       return InputComponent;
    } else {
       return null;
    }
},
controlData: {
    type: 'text'
}

您可以在此处阅读更多相关信息 - https://www.ag-grid.com/javascript-grid-cell-rendering/#many-renderers-one-column

【讨论】：