如何在 vue js 中的 AG Grid 自定义标题中添加图标
Posted
技术标签:
【中文标题】如何在 vue js 中的 AG Grid 自定义标题中添加图标【英文标题】:How to Add Icon in AG Grid Custom Header in vue js 【发布时间】:2020-05-06 03:17:20 【问题描述】:我正在尝试在 AG Grid 标题中添加信息图标,以便在我将鼠标悬停在图标上时显示工具提示。我创建了自定义工具提示组件,它在悬停时显示工具提示,但是当我添加图标时,默认排序和过滤器被删除。
import Vue from "vue";
export default Vue.extend(
template: `
<div>
<div>
params.headerName
<v-tooltip bottom max->
<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"
,
【问题讨论】:
【参考方案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->
<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 找到更多与标题组件如何工作以及自定义标题组件应该如何工作相关的详细信息
【讨论】:
以上是关于如何在 vue js 中的 AG Grid 自定义标题中添加图标的主要内容,如果未能解决你的问题,请参考以下文章