當我單擊 ag-grid 中的過濾器時，為什么行會消失？

Question

當我單擊每列旁邊的過濾器圖標時，它會打開顯示用於選擇過濾器的選項的彈出窗口，但是只有彈出窗口顯示，它后面的實際網格消失了。 所以彈出窗口只是漂浮在一個空的背景上。 當我關閉彈出窗口時，網格返回。 我僅通過<script src="./js/vue.js"></script>我的 html 使用 Vue.js：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./node_modules/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
  <link rel="stylesheet" href="node_modules/xel/themes/material.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Test</title>
</head>
<body>

  <div id="app">

    <app-header :par="'test'"></app-header>
    <app-grid ref="grid"></app-grid>

  </div>


  <script src="../node_modules/xel/xel.min.js"></script>
  <script src="./js/vue.js"></script>      
  <script src="./js/render.js"></script>
</body>
</html>

我的js：

class Spreadsheet {
  constructor(
    rowData = [],
    columnDefs = [
      {
        headerName: 'Name',
        field: 'name',
        sortable: true,
        checkboxSelection: true,
        headerCheckboxSelection: true,
        filter: 'agTextColumnFilter',
        filterParams: {
          clearButton: true,
          debounceMs: 200
        }
      },
      {
        headerName: 'Model',
        field: 'model',
        sortable: true,
        filter: 'agTextColumnFilter',
        filterParams: {
          clearButton: true,
          debounceMs: 200
        }
      },
      {
        headerName: 'Price',
        field: 'price',
        sortable: true,
        editable: true,
        filter: 'agNumberColumnFilter',
        filterParams: {
          clearButton: true,
          debounceMs: 200
        }
      }
    ]
  ) {
    this.template = `
    <div class="spreadsheet">
      <x-input class="filter" type="text" @input="filter">
        <x-label>filter...</x-label>
      </x-input>
      <div ref="grid_vue" class="ag-theme-fresh"></div>
    </div>
    `
    this.data = function() {
      return {
        columnDefs: null,
        rowData: null,
        gridOptions: null,
        devices: []
      }
    }

    this.beforeMount = function() {
      this.devices = rowData;
      this.gridOptions = {
        suppressDragLeaveHidesColumns: true,
        defaultColDef: {
          filter: true,
          resizable: true,
          width: 100
        },
        columnDefs: columnDefs,
        rowData: rowData,
        enableCellChangeFlash: true,
        animateRows: true,
        rowSelection: 'multiple',
        onGridReady: function(params) {
          params.api.sizeColumnsToFit();
        }
      }
    }
  }

  methods = {
    addItem(item_obj) {
      this.devices.push(item_obj);
      this.gridOptions.api.setRowData(this.devices);
    },
    filter(event) {
      const filter_text = event.target.value;
      this.gridOptions.api.setQuickFilter(filter_text);
    },
    redrawAllRows() {
      this.gridOptions.api.refreshCells();
      this.gridOptions.api.redrawRows();
    }
  }

  mounted = function() {
    const eGridDiv = this.$refs.grid_vue;
    new agGrid.Grid(eGridDiv, this.gridOptions);
  }

  beforeUpdate = function() {
    console.log('beforeUpdate');
    this.redrawAllRows();
  }

}

const devices = [
  {name: "phone", model: 'Sumsung', price: 35000, class: "smartphone"},
  {name: "laptop", model: 'HP', price: 32000, class: "pc"},
  {name: "test", model: 'Test', price: 72000, class: "test"}
];

const app_table = new Spreadsheet(devices);
const app_header = {
  props: ['par'],
  template: `
  <div class="pageHeader">
    <x-button class="addDongleButton" @click="addItem">
      <x-label>Add Item</x-label>
    </x-button>
  </div>
  `,
  methods: {
    addItem() {
      console.log(this.par);
      const some_obj = {name: "Test2", model: 'X2', price: 555, class: "test"};
      vm.$refs.grid.addItem(some_obj);
    }
  }
};

const vm = new Vue({
  el: "#app",
  components: {
    appHeader: app_header,
    appGrid: app_table
  }
});

Css：

@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-fresh.css";

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  background: rgb(241, 241, 241);
  box-sizing: border-box;
}

.pageHeader {
  z-index: 1000;
  background: #a1c4dd;
  height: 75px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
}

.spreadsheet {
  margin: 85px 5% 20px;
}

.filter {
  display: inline-block;
  height: 25px;
  margin-bottom: 5px;
}

.ag-theme-fresh {
  height: 400px;
  width: 100%;
}

.ag-theme-fresh.ag-dnd-ghost {
  width: 30%;
  min-width: 100px;
}

Answer 1

我不知道這是否是同一個問題，但我是在尋找非常相似的經歷時來到這篇文章的。 我找到了一個帶有 class ag-popup 的 div，如果我制定一個 css 規則，它給出的高度為 0，它似乎可以解決問題，我還沒有看到副作用。 IE

.ag-popup 
{
  height: 0;
}

Answer 2

我在使用 Svelte 時也發生了同樣的事情，使用了 joolsf 的答案。 檢查時，“.ag-theme-balham”也被應用於 div，正如 joolsf 所解釋的那樣。 在那里設置了最小高度。 這意味着我必須添加以下內容：

.ag-popup {
    height: 0 !important;
    min-height: 0 !important;
}

Answer 3

對於原始海報來說可能為時已晚，但 Thijs 是正確的。 任何 Ag Grid 主題 CSS class 都應用於主容器，但也再次應用於.ag-popup應用於相同的元素（不知道為什么）。 這還包括自定義用戶制作的主題，即任何 class 應用於以.ag-theme-前綴的主網格容器。

在您的示例中， .ag-theme-fresh也被應用於與.ag-popup相同的元素，這使彈出窗口的高度為 400px。 所以這隱藏了看起來低於 400 像素的網格項目。

一種解決方案是將 CSS class 應用到沒有.ag-theme-前綴的主網格容器，並設置不會在子元素中重復的高度（可能還有寬度）。 或者直接申請styles。

當我單擊 ag-grid 中的過濾器時，為什么行會消失？

問題描述

3 個解決方案

解決方案1
6 已采納 2019-10-16 13:25:31

解決方案2
1 2020-02-17 13:33:46

解決方案3
0 2022-08-31 22:59:39

當我單擊 ag-grid 中的過濾器時，為什么行會消失？

問題描述

3 個解決方案

解決方案1 6 已采納 2019-10-16 13:25:31

解決方案2 1 2020-02-17 13:33:46

解決方案3 0 2022-08-31 22:59:39

解決方案1
6 已采納 2019-10-16 13:25:31

解決方案2
1 2020-02-17 13:33:46

解決方案3
0 2022-08-31 22:59:39