在 ag-grid 社区版中，如何让列菜单图标按预期工作

Question

使用 vue3 和 ag-grid 社区版，当我点击列菜单图标时，文本过滤器菜单没有弹出，整个网格开始闪烁。控制台没有错误。

浏览器：Chrome 和 Edge

模块：

• “农业网格社区”：“^29.2.0”，
• “ag-grid-vue3”：“^29.2.0”，
• ...
• “vue”：“^3.2.47”，
• "vue-router": "^4.1.6",
• “验证”：“^3.1.13”

代码：

  <ag-grid-vue
    style="width: 500px; height: 200px"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
  >
  </ag-grid-vue>
</template>

<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";

export default {
  name: "App",
  components: {
    AgGridVue,
  },
  setup() {
    return {
      columnDefs: [
        { headerName: "Make", field: "make", filter: true },
        { headerName: "Model", field: "model",  },
        { headerName: "Price", field: "price" },
      ],
      rowData: [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxster", price: 72000 },
      ],
    };
  },
};
</script>

我还通过在不使用 ag-grid-vue3 的情况下将其添加到 DOM 中进行了尝试，但我仍然看到了问题。

我的期望是基于文档的这个页面，它说文本过滤器功能应该在社区版中可用：https://www.ag-grid.com/vue-data-grid/filter-text /

我也试了一下这段代码。这直接来自沙箱，它在那里工作。沙盒使用的是vue^3.0.0-0所以我想知道是不是vue的版本问题

<template>
  <ag-grid-vue
    style="width: 500px; height: 200px"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :defaultColDef="defaultColDef"
      rowSelection="multiple"
    animateRows="true"
  >
  </ag-grid-vue>
</template>

<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";

export default {
  name: "App",
  components: {
    AgGridVue,
  },
  setup() {
    return {
      columnDefs: [
        { headerName: "Make", field: "make" },
        { headerName: "Model", field: "model" },
        { headerName: "Price", field: "price" },
      ],
      rowData: [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxter", price: 72000 },
      ],
      defaultColDef : {
      sortable: true,
      filter: true,
      flex: 1
      }
    };
  },
};
</script>

Answer 1

我发现了问题。当你使用 vite 的默认设置创建一个新的 vue-3 hello-world 应用程序时，你会得到一个 base.css 文件。该文件包含以下 css 规则，它会破坏 ag-grid 过滤器弹出窗口。从 base.css 中删除规则解决了问题：

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  position: relative;
  font-weight: normal;
}