vuejs3 - 使用 Vue 3 为 AG-Grid 显示具有背景颜色的两个连续行

Question

我想显示 2 行具有相同的背景颜色。例如，第 1 行和第 2 行需要背景颜色为浅灰色；第 3 行和第 4 行需要有白色背景；再次，第 5 行和第 6 行将具有灰色背景。有没有一种方法可以基于行数据来实现？

示例网格数据：

[{ id: null, duplicateFor: 123, name: 'abc', }, { id: 123, duplicateFor: null, name: 'def', }, { id: null, duplicateFor: 456, name: 'xyz', }, { id: 456, duplicateFor: null, name: 'qwe', }, ]

Answer 1

Vue 数据网格：行样式

<template>
  <ag-grid-vue
    style="width: 600px; height: 500px"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :getRowStyle="getRowStyle"
  >
  </ag-grid-vue>
</template>
<script>
export default {
 // ...data, components etc
methods: {
    getRowStyle: params => {
      return (params.node.rowIndex) % 4 < 2 ? { background: 'red' } : { background: 'blue' }
    }  
  }
}
</script>

演示