ag-grid-vue设置单元格样式

ag-grid-vue中可以使用"cellStyle"和"cellClass"属性来设置单元格样式。

"cellStyle"可以接受一个函数，该函数接收一个参数，包含单元格的详细信息，并返回一个对象，包含要应用于单元格的样式。例如：

<ag-grid-vue
  :columnDefs="columnDefs"
  :rowData="rowData"
  :gridOptions="gridOptions"
  style="width: 100%; height: 500px;">
</ag-grid-vue>

<script>
export default {
  data() {
    return {
      columnDefs: [
        { headerName: 'Name', field: 'name', 
          cellStyle: function(params) {
            if (params.value === 'Joe') {
              return { color: 'red' };
            } else {
              return { color: 'green' };
            }
          } 
        },
        { headerName: 'Age', field: 'age' },
        { headerName: 'Address', field: 'address' },
      ],
      rowData: [
        { name: 'Joe', age: 35, address: 'New York' },
        { name: 'Bob', age: 25, address: 'Chicago' },
        { name: 'Claire', age: 45, address: 'San Francisco' },
      ],
      gridOptions: {}
    }
  }
}
</script>

"cellClass"可以接受一个函数，该函数接收一个参数，包含单元格的详细信息，并返回一个字符串，包含要应用于单元格的CSS类。例如:

<ag-grid-vue
  :columnDefs="columnDefs"
  :rowData="rowData"
  :gridOptions="gridOptions"
  style="width: 100%; height: 500px;">
</ag-grid-vue>

<style>
.red-text {
  color: red;
}
</style>

<script>
export default {
  data() {
    return {
      columnDefs: [
        { headerName: 'Name', field: 'name', 
          cellClass: function(params) {
            if (params.value === 'Joe') {
              return 'red-text';
            } else {
              return '';
            }
          } 
        },
        { headerName: 'Age', field: 'age' },
        { headerName: '