1

我正在使用 ag-grid 在 vuetify 布局中显示分页数据。

由于某些原因，似乎当 ag-grid 组件的父级之一是flex并且paginationAutoPageSize设置为时true，网格会不断重复添加新行（显然是一个错误）。

https://github.com/ag-grid/ag-grid/issues/628#issuecomment-440216606

在此处输入图像描述

将该类添加到 ag-grid 组件中：

.ag-grid-16 {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

然后给出：

在此处输入图像描述

哪个更好，但遗憾的是在我的应用程序中的其余 Vuetify 布局中效果不佳（Cashout 标题和水平线都被组件覆盖）。

网格本身：

CashoutRecords.vue：

<template>
    <ag-grid-vue
        class="ag-theme-material gray-border ag-grid-16"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :frameworkComponents="frameworkComponents"
        :rowData="cashoutRecords"
        :gridOptions="gridOptions"
        :paginationAutoPageSize="true"
        :pagination="true"
        :enableRangeSelection="true"
        @grid-ready="onGridReady"
    ></ag-grid-vue>
</template>

<style scoped>
  .ag-row .ag-cell {
    display: flex;
    align-items: center;
  }

  .ag-grid-16 {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }

  .white-bg {
    background-color: #ffffff;
  }

  .light-bg {
    background-color: #fdfefe;
  }

  .gray-border {
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
  }
</style>

<script lang="ts" src="./CashoutRecords.ts">
</script>

及其容器：

Cashout.vue：

<template>
  <v-container>

    <v-row>
      <v-col>
        <h1 class="display-1">Cashouts</h1>
      </v-col>
      <v-col cols="auto">
        <v-btn color="info" @click="openEditModal = true">
          New <v-icon small right>create</v-icon>
        </v-btn>
      </v-col>
    </v-row>

    <hr class="divider__full" />

    <CashoutRecords />

    <CashoutEditModal :open.sync="openEditModal" />

  </v-container>
</template>

<script lang="ts" src="./Cashout.ts">
</script>

ag-grid-16我怎样才能用那个CSS 类（为了避免不断增长的行）包装我的 ag-grid，以便我仍然可以看到<h1>标题Cashouts和它上面的水平线。

4

0 回答 0