vue-js-ag网格过滤器组件不工作

Question

我对vue-js和ag网格很陌生，我想在我的ag网格上有一个自定义过滤器，所以尝试使用组件作为过滤器，如vue-js-ag网格示例所示："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。它只是更干净。

filter: "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-扩展