javascript - 有没有办法过滤我们的树显示的内容?
问题描述
我想知道是否有一种方法可以过滤我们在 V-treeview 中可以看到的内容。在过滤器字段输入中,我们键入树元素的键的开头,然后树将只向我们显示其键以我们在过滤器字段输入中键入的内容开头的元素。
我在 vue.js 上,使用的是我在 vuetify 页面上搜索过的最新版本的 vuetify,但我还没有找到 https://vuetifyjs.com/en/components/treeview
剩下的两个问题:我只能过滤我的树视图以获得一个子深度级别。我的孩子的孩子不能被过滤。(在 codepen 示例中检查日历的子节点)此外,当我匹配一个子节点时,其他节点不会隐藏。
HTML
<div id="app">
<v-app id="inspire">
<v-treeview :selectable="true"
:items="items"></v-treeview>
</v-app>
</div>
JS
new Vue({
el: '#app',
computed: {
itemsComputed() {
return this.items.filter(v => {
let regexp = new RegExp(`^${this.search}`, "i")
return v.name.match(regexp)
|| v.children.find(v => v.name.match(regexp))
})
}
},
data: () => ({
search: "",
items: [
{
id: 1,
name: 'Applications :',
children: [
{ id: 2, name: 'Calendar : app',
children: [
{
id: 3, name: 'Chrome : app'
},
{
id: 4, name: 'Webstorm : app'
}
]},
]
},
{
id: 5,
name: 'Documents :',
children: [
{
id: 6,
name: 'vuetify :',
children: [
{
id: 7,
name: 'src :',
children: [
{ id: 8, name: 'index : ts' },
{ id: 9, name: 'bootstrap : ts' }
]
}
]
},
{
id: 10,
name: 'material2 :',
children: [
{
id: 11,
name: 'src :',
children: [
{ id: 12, name: 'v-btn : ts' },
{ id: 13, name: 'v-card : ts' },
{ id: 14, name: 'v-window : ts' }
]
}
]
}
]
},
{
id: 15,
name: 'Downloads :',
children: [
{ id: 16, name: 'October : pdf' },
{ id: 17, name: 'November : pdf' },
{ id: 18, name: 'Tutorial : html' }
]
},
{
id: 19,
name: 'Videos :',
children: [
{
id: 20,
name: 'Tutorials :',
children: [
{ id: 21, name: 'Basic layouts : mp4' },
{ id: 22, name: 'Advanced techniques : mp4' },
{ id: 23, name: 'All about app : dir' }
]
},
{ id: 24, name: 'Intro : mov' },
{ id: 25, name: 'Conference introduction : avi' }
]
}
]
})
})
解决方案
我使用了这篇文章中的这个功能
filter: function(array, text) {
return array.filter(function iter(o) {
var temp;
if (o.name.match(text)) {
return true;
}
if (!Array.isArray(o.children)) {
return false;
}
temp = o.children.filter(iter);
if (temp.length) {
o.children = temp;
return true;
}
});
我错过了孩子们的情况
推荐阅读
- c++ - 如何检查集合的元素在 C++ 中是否等于零?
- django - Django - XAMPP - Apache - Cookiecutter
- excel - 使用与日期关联的值创建自定义表
- python - 如何定期检查线程是否完成
- javascript - 与 spawn() 子进程通信?
- c# - C# xUnit 中的递归类固定装置
- python - 如何有效地构建不重复的字典列表?
- r - Diff-in-diff 使用工具变量:如何使用 ivreg 实现?(内生变量和外生变量之间的相互作用)
- arduino - 节点 mcu esp8266 与 MQTT 代理断开连接
- docker - 从 Kubernetes 中删除 docker 支持的影响