vue js的ag-grid过滤组件无法工作。

Question

我对vue-js和ag-grid很陌生，我想在我的ag-grid上有一个自定义的过滤器，所以尝试使用组件作为过滤器，如vue-js ag-grid例子所示。"https:/www.ag-grid.comjavascript-grid-filter-component"，但它没有工作，并在控制台中给出 "componentType is not a constructor "错误。

以下是我的代码。

Gird:

<template>
  <div class="all-devices" style="width: 100%; height: 425px;">
    <ag-grid-vue
      style="width: 100%; height: 100%;"
      class="ag-theme-balham"
      :gridOptions="gridOptions"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"
      :frameworkComponents="frameworkComponents"
    ></ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import PartialMatchFilter from "./PartialMatchFilter";

export default {
  name: "AllDevices",
  components: {},
  data() {
    return {
      gridOptions: null,
      columnDefs: null,
      defaultColDef: null,
      rowData: null,
      frameworkComponents: null
    };
  },
  components: {
    AgGridVue
  },
  beforeMount() {
    this.gridOptions = {};
    this.columnDefs = [
      {
        headerName: "Row",
        field: "row",
        width: 450
      },
      {
        headerName: "Filter Component",
        field: "name",
        width: 430,
        filter: "partialMatchFilter"
      }
    ];

    this.rowData = [
      {
        row: "Row 1",
        name: "Michael Phelps"
      },
      {
        row: "Row 2",
        name: "Natalie Coughlin"
      },
      {
        row: "Row 3",
        name: "Aleksey Nemov"
      },
      {
        row: "Row 4",
        name: "Alicia Coutts"
      },
      {
        row: "Row 5",
        name: "Missy Franklin"
      },
      {
        row: "Row 6",
        name: "Ryan Lochte"
      },
      {
        row: "Row 7",
        name: "Allison Schmitt"
      },
      {
        row: "Row 8",
        name: "Natalie Coughlin"
      },
      {
        row: "Row 9",
        name: "Ian Thorpe"
      },
      {
        row: "Row 10",
        name: "Bob Mill"
      },
      {
        row: "Row 11",
        name: "Willy Walsh"
      },
      {
        row: "Row 12",
        name: "Sarah McCoy"
      },
      {
        row: "Row 13",
        name: "Jane Jack"
      },
      {
        row: "Row 14",
        name: "Tina Wills"
      }
    ];

    this.defaultColDef = { filter: true };
    this.frameworkComponents = { partialMatchFilter: PartialMatchFilter };
  },
  methods: {
    onGridReady(params) {
      params.api.sizeColumnsToFit();
    }
  }
};
</script>

<style>
</style>

过滤组件。

<template>
  <div>
    <input style="height: 20px" :ref="'input'" v-model="text" />
  </div>
</template>
<script>
export default {
  name: "PartialMatchFilter",
  data() {
    return {
      text: "",
      valueGetter: null
    };
  },
  methods: {
    isFilterActive() {
      return this.text !== null && this.text !== undefined && this.text !== "";
    },
    doesFilterPass(params) {
      return (
        !this.text ||
        this.text
          .toLowerCase()
          .split(" ")
          .every(filterWord => {
            return (
              this.valueGetter(params.node)
                .toString()
                .toLowerCase()
                .indexOf(filterWord) >= 0
            );
          })
      );
    },
    getModel() {
      return { value: this.text };
    },
    setModel(model) {
      if (model) {
        this.text = model.value;
      }
    },
    afterGuiAttached() {
      this.$refs.input.focus();
    },
    componentMethod(message) {
      alert(`Alert from PartialMatchFilterComponent ${message}`);
    }
  },
  watch: {
    text: function(val, oldVal) {
      if (val !== oldVal) {
        this.params.filterChangedCallback();
      }
    }
  },
  created() {
    this.valueGetter = this.params.valueGetter;
  }
};
</script>

我是不是遗漏了什么？请帮助我! - 谢谢你的帮助

Answer 1

我也遇到了同样的问题。

首先，在你的columnDefs中做这样的修改，然后去掉frameworkComponents。它只是更干净。

filter: "partialMatchFilter" -> filterFramework: PartialMatchFilter

然后，实际的修复.在你的过滤器组件中添加Vue.extend.Extension。

<template>
   ...
</template>

<script>
import Vue from "vue";

export default Vue.extend({
   ...
});

我遵循的例子是-> https：/github.comag-gridag-grid-vue-exampletreemastersrcrich-grid-example。Vue.extend的参考文献 -> https:/vuejs.orgv2api#Vue-extend。