切换 Ag-Grid 中的浮动过滤器？

我试图通过开关或按钮单击来确定浮动过滤器的显示。看起来很简单。我应该能够在 true 和 false 之间切换，将该值提供给网格选项中的浮动过滤器，然后刷新标题，对吗？不幸的是，网格似乎总是落后一步。当我第一次点击时，什么也没有发生。当我将开关切换回 false 时，浮动过滤器就会出现。然后，浮动过滤器将继续出现（当开关为假时）并消失（当开关为真时）。让事情变得更奇怪的是，如果我切换浮动过滤器开关几次，然后尝试切换 rowGroupPanelShow （我也试图切换），它将触发浮动过滤器切换到以前不是的任何值。但只有一次。

我对此尝试了一些变化。我试过开关和按钮。我尝试过观察者并编写自己的函数来切换 true 和 false。我试过打电话this.gridApi.refreshHeader()在与切换相同的函数内并从它自己的函数调用它。我试过打电话this.columnApi.resetColumnState()（用于重置分组）。控制台的所有内容都正确记录，但网格似乎总是落后一步。

这是我从 ag-grid 网站上获取的一个 plunker 的链接，并对其进行了修改以演示其行为：https://plnkr.co/edit/Me51NOVOCbmvFxx95WpP?p=preview https://plnkr.co/edit/Me51NOVOCbmvFxx95WpP?p=preview

这是开关和网格：

<v-layout row wrap justify-center>
  <v-flex xs6 sm2 md2>
    <v-switch
      class="switch"
      color="blue"
      id="filterSwitch"
      label="Floating Filter"
      v-model="filterSwitch"
    ></v-switch>
  </v-flex>
  <v-flex xs6 sm2 md2>
    <v-switch
      class="switch"
      color="blue"
      id="groupSwitch"
      label="Row Grouping Panel"
      v-model="groupSwitch"
    ></v-switch>
  </v-flex>
</v-layout>
<div class="buys">
  <ag-grid-vue
  id="personTableAgGridTest"
  style="width: 100%; height: 65vh;"
  class="ag-theme-balham"
  :columnDefs="columnDefs"
  :rowData="rowData"
  :cacheBlockSize="cacheBlockSize"
  :rowModelType="rowModelType"
  :enableColResize="true"
  :enableFilter="true"
  :enableSorting="true"
  :rowSelection="rowSelection"
  :animateRows="true"
  :floatingFilter="floatingFilter"
  :maxConcurrentDatasourceRequests="maxConcurrentDatasourceRequests"
  :defaultColDef="defaultColDef"
  :columnTypes="columnTypes"
  :sideBar="sideBar"
  :rowGroupPanelShow="rowGroupPanelShow"
  :gridReady="onGridReady"
  >

  </ag-grid-vue>

这是相关绑定数据

export default {
  data() {
    return {
      columnDefs: null,
      rowData: null,
      cacheBlockSize: 250,
      rowSelection: 'multiple',
      maxBlocksInCache: 5,
      gridApi: null,
      columnApi: null,
      rowGroupPanelShow: 'always',
      floatingFilter: false,
      filterSwitch: false,
      groupSwitch: false,
      rowModelType: 'serverSide',
      maxConcurrentDatasourceRequests: 1,

这是函数/观察者

    resetColumns () {
      this.columnApi.resetColumnState()
    },
    refreshHeader2 () {
      console.log('in refresh header', this.floatingFilter)
      this.gridApi.refreshHeader()
      // this.resetColumns()
    }
 },
  watch: {
    filterSwitch (val) {
      console.log('val', val, this.floatingFilter)
      this.floatingFilter = !this.floatingFilter
      this.refreshHeader2()
    },

预期：是否显示浮动过滤器应通过开关切换。将开关的值传递到网格，然后刷新标题应该可以完成此操作。

实际：网格似乎落后了一步（当开关为假时显示浮动过滤器）。

在我的评论中，我建议修复它setTimeout(..., 0):

https://plnkr.co/edit/9NAfPeEu8GgJw7okqz77?p=preview https://plnkr.co/edit/9NAfPeEu8GgJw7okqz77?p=preview

watch: {
    filterSwitch () {
        // logs correctly with value of filterSwitch
        console.log('filterSwitch', this.filterSwitch)
        setTimeout(() => {
            // refresh header after value of floating filter has changed
            this.gridApi.refreshHeader()
        }, 0);
    }
},

以下是一些一般信息：为什么 setTimeout(fn, 0) 有时很有用？ https://stackoverflow.com/q/779379/405015

在 React （我知道）中我会使用setState打回来 https://reactjs.org/docs/react-component.html#setstate:

this.setState({
    filterSwitch: !filterSwitch,
}, () => {
    this.gridApi.refreshHeader();
});

我不知道是否有等效的 Vue.js，但是setTimeout(..., 0)完成类似的事情。