AG 网格：框架组件缺少 isFilterActive() 方法

Question

我正在使用 "ag-grid-community": "^29.3.3", "ag-grid-vue3": "^29.3.3"，以及 vue 3 组合 api。 这是自定义过滤器组件，我用它来过滤表中的列。当我检查过滤器中的某些选项时，它会弹出此警告，并且不显示此列中有过滤器。

<template>
  <div>
    <div class="custom-filter-wrapper">
      <div class="custom-filter-body">
        <label
          v-for="option in params.values"
          :key="option.value"
          class="options"
        >
          <input
            type="checkbox"
            :value="option"
            v-model="filterState"
            @change="updateFilter(option)"
          />
          {{ option }}
        </label>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from "@vue/reactivity"
  const { params } = defineProps();
  const { field } = params.colDef;
  const filterState = ref([]);

  const isFilterActive = () => {
    return true
  }
  const updateFilter = (value) => {
    params.filterChangedCallback();
  }
  const doesFilterPass = (params) => {
    return params.data[field] == filterState.value
  }
  const getModel = () => {
    if(filterState.value.length != 0){
      return undefined
    }
    return { state: filterState.value }
  }
  const setModel = (model) => {
    if(model == null) {
      updateFilter([])
    } else {
      updateFilter(model.state)
    }
  }
</script>

Answer 1

这是 vue3 组合 API 的脚本设置标签的错误。解决方法是使用 setup() 而不是 .稍后谢谢我！

Answer 2

@simpledev 您如何将自定义 Composition API SFC 过滤器组件注册到 ag-grid-vue？

我被困在这里：Vue-ag-grid 自定义列过滤器与 Composition API SFC