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

Question

我尝试使用 select 框来过滤 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 中捕获手表上 select 框的值：

观看：{

    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
    }
},

在 select 框中输入 select 之后，我看到错误：

"TypeError: Cannot read property 'setQuickFilter' of undefined"

谁能帮帮我？谢谢

Answer 1

勾选

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

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