从vue-tables-2中获取筛选的行数组

Question

我需要一些关于流行的vue库https://www.npmjs.com/package/vue-tables-2的帮助。

我已经修复了行的过滤器，但现在我需要将过滤后的行(行的对象)存储在一个数组中，有人知道如何实现这一点吗？

我希望这可以集成到库中，因为我不喜欢修复一个老生常谈的解决方案。

我试图在文档中查找它，但我什么也找不到。

Answer 1

简短的回答：

您可以使用组件的allFilteredData属性。

使用工作示例更长的答案：

您可以在表组件的实例上使用ref，然后访问allFilteredData属性。

这里有两个例子：

下面的代码在完整的小提琴中可用。例如，在过滤器中键入"zi“，然后点击表格下面的”处理过滤结果“按钮。单击该按钮将导致一个方法访问allFilteredData属性。

https://jsfiddle.net/tzdw17qo/

给定该小提琴示例中的部分代码：

  <v-client-table ref="countries" :columns="columns" v-model="data" :options="options">...</v-client-table>
  <button @click="handleFilteredResult">Process Filtered Result</button>
  <textarea ref="json_dump"></textarea>

这样的方法将具有对过滤数据的引用，以便执行更有用的操作。这只是一个基本的工作示例：

    methods: {
     /**
      * Log out allFilteredData for now for demo only 
      * @TODO Something specific with the data
      */
     handleFilteredResult () {
      // log the value of the allFilteredData attribute
      console.log({allFilteredData: this.$refs.countries.allFilteredData});
       // for example write the json version out to a textarea:
       this.$refs.json_dump.value = JSON.stringify(this.$refs.countries.allFilteredData);
     }
    },

然后是监听"filter“事件的另一个例子：

https://jsfiddle.net/ev645umy/

来自小提琴的Html：

  <!-- bind to the `filter` event of the component -->
  <v-client-table ref="countries" @filter="onFilter" :columns="columns" v-model="gridData" :options="options">

来自小提琴的JavaScript：

  methods: {
   /**
    * Log out allFilteredData for now for demo only 
    * @TODO Something specific with the data
    */
   onFilter () {
   // as of this writing, the `filter` event fires before the data is filtered so we wait to access the filtered data
   setTimeout(() => {
    console.log({allFilteredData: this.$refs.countries.allFilteredData});
    this.$refs.json_dump.value = JSON.stringify(this.$refs.countries.allFilteredData);
   }, 250);
  }
  },

更多信息：

• https://matanya.gitbook.io/vue-tables-2/properties
• https://matanya.gitbook.io/vue-tables-2/events