Question

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

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

以下是指向我从ag-grid网站上获取的窃听器的链接，并对其进行了修改以演示行为：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()
    },

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

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

Answer 1

在我的评论中，我建议使用0*进行修复：

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

0**

以下是一些常规信息：Why is setTimeout(fn, 0) sometimes useful?

在React（我知道）中，我会使用setState callback：

'0**'

我不知道是否有等效的Vue.js，但是0完成了类似的工作。

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

1 个答案: