为什么单击 ag-grid 中的过滤器时行会消失？

Question

当我单击每列旁边的筛选器图标时，它会打开显示用于选择筛选器的选项的弹出窗口，但是只有弹出窗口显示，它后面的实际网格消失了。所以弹出窗口只是漂浮在一个空的背景上。当我关闭弹出窗口时，网格 returns。我只用 Vue.js <script src="./js/vue.js"></script> 我的 html:

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

我不知道这是否是同一个问题，但我在寻找非常相似的经历时遇到了这个 post。我找到了一个 div 和 class ag-popup，如果我制定一个 css 规则给出高度为 0 它似乎解决了这个问题而且我没有看到副作用然而。即

.ag-popup 
{
  height: 0;
}

Answer 2

我在使用 Svelte 时发生了同样的事情，使用了 joolsf 的答案。正如 joolsf 所解释的那样，检查“.ag-theme-balham”时也应用于 div。在那里设置了一个最小高度。这意味着我必须添加以下内容：

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

为什么单击 ag-grid 中的过滤器时行会消失？

Why rows disappear when I click on filter in ag-grid?

javascript

vue.js

ag-grid