如何在 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 自定义标题中添加图标的主要内容,如果未能解决你的问题,请参考以下文章

React 中的 Ag-grid 纯 JS 单元格渲染器

Ag-grid 自定义工具提示不适用于网格单元

如何在 Vue.js 中的两个组件之间共享一个方法?

在 ag-Grid 中的列标题上添加自定义下拉菜单

ag-grid 角度中的自定义工具提示部分可见

Ag-grid 自定义工具提示位置更改