如何在 vue js 中的 AG Grid 自定义标题中添加图标答案

【问题标题】：How to Add Icon in AG Grid Custom Header in vue js如何在 vue js 中的 AG Grid 自定义标题中添加图标
【发布时间】：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-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"
},

【问题讨论】：

标签： javascript vue.js vuejs2 ag-grid ag-grid-vue

【解决方案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 找到更多与标题组件如何工作以及自定义标题组件应该如何工作相关的详细信息

【讨论】：