0

我正在尝试在 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"
},
4

1 回答 1

0

因为您正在用自定义标题重写 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您可以找到有关标题组件如何工作和自定义标题组件应该工作的更多详细信息

于 2020-01-21T10:51:57.873 回答