Ag-Grid 下拉弹出窗口已隐藏

Question

我正在尝试将自定义下拉单元格编辑器组件加载到 Vue3 中的 Ag-Grid 中。我在这里重现了该问题：https://codesandbox.io/s/ag-grid-vue-3-example-forked-h5z6r5?file=/src/App.vue

问题在于选项隐藏在行下方。 我找到了一种通过重写来解决此问题的欺骗方法：

.ag-row-focus {
    z-index: 999;
}

.ag-grid-cell {
    overflow-y:visible !important;
    overflow-x:visible !important;
    z-index: 999 !important;
}

这种方法的问题在于它完全依赖于 ag-row-focus。如果用户选择了特定行，然后单击另一行的下拉列表（例如上面的行），则所选行仍然是另一行，因此选项仍然处于隐藏状态。还有其他问题，例如具有这些溢出设置的下拉菜单本身不再考虑单元格宽度和高度（尤其是高度）。当文本大于预期时，折叠时也会打破该单元格的高度规则。

使用的Ag-Grid版本：

"ag-grid-community": "26.1.0",
"ag-grid-vue3": "26.1.2",

更新：

我现在通过添加下面的 css 来实现大部分行为。剩下的问题是下拉列表中的文本也会溢出并变得太大，因为它会进入其他单元格并且高度比行更远。预期的行为可能是文本被切断。

.ag-grid-cell {
  overflow: visible !important;
  z-index: 10030 !important;
}
.ag-row {
  z-index: 0;
}

.ag-row.ag-row-focus {
  z-index: 1;
}
.ag-root-wrapper,
.ag-root,
.ag-body-viewport,
.ag-body-viewport-wrapper,
.ag-center-cols-clipper {
  overflow: visible !important;
  z-index: 5;
}

.ag-center-cols-viewport {
  overflow: visible !important;
}

更新了沙箱： https://codesandbox.io/s/ag-grid-vue-3-example-forked-nvnhue?file=/src/App.vue

Answer 1

你找到这个问题的解决方案了吗？我也有同样的问题......