无法在 ag-grid Vue 中读取未定义的属性“setQuickFilter”

Question

我尝试使用选择框过滤 ag-grid。网格定义为：

<ag-grid-vue id="myGrid" style="width: 1140px; height:500px"

   class="ag-theme-balham"
   :columnDefs="columnDefs"
   :rowData="rowData"
   :enableSorting="true"
   :enableFilter="true"
   :pagination="true"
   :paginationPageSize="10"                                    
   :setQuickFilter="quickFilterText"
</ag-grid-vue>

数据部分是：

data() {
            return {
                columnDefs: null,
                rowData: null,
                quickFilterText: ''
     }

我尝试在 Vue 中捕获选择框的值：

观看：{

    filter: {
        handler: function (filter) {
            {
                this.$nextTick(() => {
                    let companyNames = this.$refs.company.getSelectedValue();
                    this.quickFilterText = companyNames;
                    gridOptions.api.setQuickFilter(this.quickFilterText);
                    document.addEventListener('DOMContentLoaded', function() {
                        let gridDiv = document.querySelector('#myGrid');
                        new agGrid.Grid(gridDiv, gridOptions);
                    });
                });
            }
        },
        deep: true
    }
},

在选择框中选择后，我看到了错误：

“TypeError: 无法读取未定义的属性 'setQuickFilter'”

任何人都可以帮助我吗？谢谢

Answer 1

查看this post

您需要使用gridReady 函数将gridApi 绑定到本地属性。

一旦你绑定它，你就可以使用 this.gridApi.setQuickFilter(this.quickFilterText);