ag-grid设置单元格样式

你可以在 ag-grid 中使用 `cellStyle` 属性来设置单元格的样式。该属性需要传入一个返回样式对象的函数，该函数接受单元格的参数作为参数。

例如，以下代码将设置单元格的背景颜色为红色：

{
  headerName: "Name",
  field: "name",
  cellStyle: function(params) {
    return { backgroundColor: 'red' };
  }
}

你还可以使用 `params` 中的其他属性来根据单元格的值动态设置样式。

例如，以下代码将根据单元格的值将文本颜色设置为红色或绿色：

{
  headerName: "Status",
  field: "status",
  cellStyle: function(params) {
    if (params.value === 'OK') {
      return { color: 'green' };
    } else {
      return { color: 'red' };
    }
  }
}

相关问题

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;
    }
  }

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

ag-grid-vue设置单元格编辑时的样式

可以在ag-grid-vue组件的template中使用v-bind指令绑定样式。在编辑状态下使用v-bind:class指令绑定一个特定的class，可以改变单元格的样式。例如：

<ag-grid-vue 
    ...
    :columnDefs="columnDefs"
    >
        <template slot-scope="params">
            <div v-bind:class="{'editing-cell':params.node.isEditing()}">
                {{params.value}}
            </div>
        </template>
</ag-grid-vue>

在CSS中定义.editing-cell类，用来改变单元格编辑时的样式。