vue.js - vue js ag-grid 过滤器组件不起作用

Question

我对 vue-js 和 ag-grid 很陌生，我想在我的 ag-grid 上有一个自定义过滤器，因此尝试使用组件作为过滤器，如 vue-js ag-grid 示例所示:“https://www.ag-grid.com/javascript-grid-filter-component/ ”但它不起作用并在控制台中给出“componentType不是构造函数”错误。

下面是我的代码:

网格:

<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。它只是更干净。

过滤器:“partialMatchFilter”->filterFramework:PartialMatchFilter

然后是实际修复。在您的过滤器组件中添加 Vue.extend:

<template>
   ...
</template>

<script>
import Vue from "vue";

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

我遵循的示例 -> https://github.com/ag-grid/ag-grid-vue-example/tree/master/src/rich-grid-exampleVue.extend 的引用 -> https://v2.vuejs.org/v2/api/#Vue-extend