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

发布于 2025-01-11 14:20:34 字数 383 浏览 0 评论 0原文

我想显示 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',
 }]

原文

I want to display 2 rows with same background color. For e.g. row 1 and row 2 needs to have background color light grey; row 3 and row 4 needs to have white background; again row 5 and row 6 will have a grey background. Is there a way we can achieve this based on row data ?

Sample grid data :

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自找没趣 2025-01-18 14:20:34

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>

演示

Vue Data Grid: Row Styles

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

Demo

回复收藏 0 原文

~没有更多了~