如何在 vue js 中的 AG 网格自定义标头中添加图标

Question

我正在尝试在AG Grid标题中添加信息图标，以便在将鼠标悬停在图标上时显示工具提示。我已经创建了自定义工具提示组件，该组件在悬停时显示工具提示，但是当我添加图标时，默认排序和过滤器将被删除。

import Vue from "vue";
export default Vue.extend({
template: `
<div>
<div>
{{ params.headerName }}
<v-tooltip  bottom max-width="200">
<template v-slot:activator="{ on }">  
<i v-on="on" class="custom-info info circle icon"></i>
</template>
<span>{{params.toolTipText}}</span>
</v-tooltip>
</div>
</div>  
`,
data: function() {
return {
};
},
beforeMount() {},
mounted() {
//   console.log("header components",params.value);
},
methods: {
},
}, );

**
Column Defs Code: **
this is the code
for column defs.
field: "ndc11",
filter: "agNumberColumnFilter",
headerComponent: 'customTooltipIcon',
headerComponentParams: {
headerName: "NDC11",
toolTipText: "NDC11"
},
pinned: "left",
cellClass: params => {
if (
params.data &&
params.data.ion_dispute_code &&
params.data.ion_dispute_code.length &&
(params.data.ion_dispute_code.includes("O") ||
params.data.ion_dispute_code.includes("N") ||
params.data.ion_dispute_code.includes("U") ||
params.data.ion_dispute_code.includes("G"))) {
return "validation-grid-cell-red"
}
},
cellRenderer: "ndc11Render",
sort: "asc"
},

Answer 1

因为您正在使用自定义的 ag-grid 标头重写，而不是在其中添加排序和过滤

下面是一个示例，它应该是什么样子：

export default Vue.extend({
template: `
<div>
<div
v-if="params.enableMenu"
ref="menuButton"
class="customHeaderMenuButton"
@click="onMenuClicked($event)"
>
<i class="fa" :class="params.menuIcon"></i>
</div>
<div class="customHeaderLabel">{{ params.headerName }}</div>
<v-tooltip  bottom max-width="200">
<template v-slot:activator="{ on }">  
<i v-on="on" class="custom-info info circle icon"></i>
</template>
<span>{{ params.toolTipText }}</span>
</v-tooltip>
<div
v-if="params.enableSorting"
@click="onSortRequested('asc', $event)"
:class="ascSort"
class="customSortDownLabel"
>
<i class="fa fa-long-arrow-alt-down"></i>
</div>
<div
v-if="params.enableSorting"
@click="onSortRequested('desc', $event)"
:class="descSort"
class="customSortUpLabel"
>
<i class="fa fa-long-arrow-alt-up"></i>
</div>
<div
v-if="params.enableSorting"
@click="onSortRequested('', $event)"
:class="noSort"
class="customSortRemoveLabel"
>
<i class="fa fa-times"></i>
</div>
</div>
`;
data: function () {
return {
ascSort: null,
descSort: null,
noSort: null
};
},
beforeMount() {},
mounted() {
this.params.column.addEventListener('sortChanged', this.onSortChanged);
this.onSortChanged();
},
methods: {
onMenuClicked() {
this.params.showColumnMenu(this.$refs.menuButton);
},
onSortChanged() {
this.ascSort = this.descSort = this.noSort = 'inactive';
if (this.params.column.isSortAscending()) {
this.ascSort = 'active';
} else if (this.params.column.isSortDescending()) {
this.descSort = 'active';
} else {
this.noSort = 'active';
}
},
onSortRequested(order, event) {
this.params.setSort(order, event.shiftKey);
}
}
});

示例取自 AG-Grid 文档： https://www.ag-grid.com/javascript-grid-header-rendering/#vueCellEditing

同样在这里 https://www.ag-grid.com/javascript-grid-header-rendering/#vueCellEditing 您可以找到与标头组件如何工作以及自定义标头组件应该如何工作相关的更多详细信息