ag-grid-vue设置单元格输入时的样式

在 ag-grid 中使用 Vue，可以使用 `cellStyle` 和 `cellClass` 属性来设置单元格的样式。

`cellStyle` 可以用来设置单元格的内联样式，可以使用 JavaScript 对象来定义样式。

<ag-grid-vue 
  :columnDefs="columnDefs"
  :rowData="rowData"
  :gridOptions="gridOptions">
</ag-grid-vue>

...

data() {
  return {
    columnDefs: [
      {headerName: 'Name', field: 'name', cellStyle: {'background-color': 'red'}},
    ],
    rowData: [
      {name: 'John Smith'},
    ],
    gridOptions: {},
  }
}

`cellClass` 则可以用来指定单元格使用哪个 CSS 类，可以是一个字符串或者一个返回字符串的函数。

<ag-grid-vue 
  :columnDefs="columnDefs"
  :rowData="rowData"
  :gridOptions="gridOptions">
</ag-grid-vue>

...

data() {
  return {
    columnDefs: [
      {headerName: 'Name', field: 'name', cellClass: 'my-cell-class'},
    ],
    rowData: [
      {name: 'John Smith'},
    ],
    gridOptions: {},
  }
}

在 css中：

.my-cell-class {
  background-color: red;
}

也可以使用函数来返回一个字符串来实现动态类的添加

cellClass: function(params) {
    if (params.value === "type1") {
      return "type1";
    } else if (params.value === "type2") {
      return "type2";
    } else {
      return null;
    }
  }

这些配置可以在行内单元格级别来使用也可以在列级别使用