vue.js Ag-grid列菜单:显示溢出文本

nqwrtyyt  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(395)

默认情况下,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";
  }
}
qnakjoqk

qnakjoqk1#

深入研究Ag-grid的过滤器列表样式后,我意识到过滤器项是绝对定位的,并且使用top值进行放置。这使得在不使过滤器值相互冲突的情况下很难 Package 过滤器值。
我联系了Ag-grid支持部门,他们确认不支持动态过滤器列表宽度。不过他们提到了他们的工具提示功能,这对我的用例很有效。
我用两种方法修改了这个例子:
1.仅显示较长且将被筛选器菜单边缘截断的筛选器列表值的工具提示。
1.仅显示筛选器列表中值的工具提示,而不显示网格中行的工具提示。
以下是我的自定义工具提示版本,包含上述修改:

export class GridColumnFilterTooltip {
  init(params) {
    const FILTER_VALUE_CHARACTER_LIMIT = 28;
    this.tooltip = document.createElement("div");

    if (
      params.location === "setFilterValue" &&
      params.value.length > FILTER_VALUE_CHARACTER_LIMIT
    ) {
      this.tooltip.classList.add("grid-column-filter-tooltip");
      this.tooltip.innerHTML = params.value;
    }
  }

  getGui() {
    return this.tooltip;
  }
}

相关问题