如何在Vue js中的AG Grid自定義標題中添加圖標

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 頭重寫 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您可以找到有關標題組件如何工作和自定義標題組件應該如何工作的更多詳細信息