我需要一些帮助，了解一个流行的vue库。https:/www.npmjs.compackagevue-tables-2.
我有一个固定的过滤行，但现在我需要过滤后的行（行的对象）存储在一个数组中，有人知道如何实现这一点吗？
我希望这个功能能集成在库中，因为我不喜欢修复一个黑客解决方案。
我试着在文档中查找它，但我找不到任何东西。
简短的回答。
你可以使用
allFilteredData组件的属性。
使用工作实例进行较长的回答。
你可以使用 ref 的实例上，然后访问表组件的 allFilteredData 属性。
这里有两个例子。
下面的代码可以在一个完整的函数中使用. 例如在过滤器中输入 "zi"，然后单击表格下的 "处理过滤结果 "按钮。点击该按钮的结果是一个方法访问了 allFilteredData 财产。
鉴于这个fiddle例子中的部分代码。
<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);
}
},
然后另一个例子是监听 "过滤 "事件:
Html from the fiddle:
<!-- bind to the `filter` event of the component -->
<v-client-table ref="countries" @filter="onFilter" :columns="columns" v-model="gridData" :options="options">
JavaScript from the fiddle:
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);
}
},
更多信息。