如何自定义数字输入类型单元格 ag-grid答案

【问题标题】：How to Customize Number Input Type Cell ag-grid如何自定义数字输入类型单元格 ag-grid
【发布时间】：2019-01-08 19:55:00
【问题描述】：

我的 ag-grid 中确实有输入列，它们应该只接受 number 类型的值。

   ngOnInit(): void {

        this.columnDefs = [
 {
            headerName: 'Header', field: 'quantity',
            cellRendererParams: params => {
              return {
                inputType: 'number'
              };
            }
          }
    ];

使用上述方法时，行为与预期一致，但在单元格中添加了 2 个箭头按钮（向上和向下），可以将当前值增加或减少 1。

我不知道如何删除这个按钮，因为找不到这些参考。

还有其他方法吗？或者，如何删除这些按钮？

【问题讨论】：

你使用自己的cellRenderer实现吗

标签： angular typescript numbers cell ag-grid

【解决方案1】：

通过css你可以试试

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

但仍在使用鼠标滚轮来增加/减少数字

【讨论】：

【解决方案2】：

你可以试试以下：

ngOnInit(): void {

        this.columnDefs = [{
            headerName: 'Header', field: 'quantity',
            cellRenderer: params => {
              return '<input type="number" class="my-custom-input-class">';
            }
        }];
}

和css

input[type=number]::-webkit-inner-spin-button.my-custom-input-class, 
input[type=number]::-webkit-outer-spin-button.my-custom-input-class { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

【讨论】：