默认情况下,Ag-grid设置了一个固定的列菜单宽度。他们的文档中有一个将列菜单宽度设置为不同固定值的示例。这种方法的问题是每列都将具有相同的菜单宽度。
是否有一种方法可以根据列的筛选器列表值动态设置列菜单宽度?以下方法无效:
.ag-set-filter-list {
width: auto;
}
类似地,自动换行也可以解决此问题,但也不起作用:
.ag-set-filter-list {
overflow-wrap: break-word;
}
我还尝试在渲染后使用postPopup回调来调整样式,但没有成功:
created() {
this.postProcessPopup = (params) => {
if (params.type !== 'columnMenu') {
return;
}
params.ePopup.style.overflowWrap = "break-word";
params.ePopup.style.width = "auto";
}
}
1条答案
按热度按时间qnakjoqk1#
深入研究Ag-grid的过滤器列表样式后,我意识到过滤器项是绝对定位的,并且使用
top
值进行放置。这使得在不使过滤器值相互冲突的情况下很难 Package 过滤器值。我联系了Ag-grid支持部门,他们确认不支持动态过滤器列表宽度。不过他们提到了他们的工具提示功能,这对我的用例很有效。
我用两种方法修改了这个例子:
1.仅显示较长且将被筛选器菜单边缘截断的筛选器列表值的工具提示。
1.仅显示筛选器列表中值的工具提示,而不显示网格中行的工具提示。
以下是我的自定义工具提示版本,包含上述修改: