我需要一些关于流行的 vue 库 https://www.npmjs.com/package/vue-tables-2 的帮助。
我为行固定了一个过滤器，但现在我需要将过滤后的行（行的对象）存储在一个数组中，有人知道如何实现吗？
我希望这被集成到库本身中，因为我不喜欢修复一个 hacky 解决方案。
我试图在文档中查找它，但我找不到任何东西。
【问题讨论】：
标签： vue.js vuejs2 vuex vuetify.js vue-tables-2
简答：
您可以使用组件的
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);
}
},
更多信息：
【讨论】：