根据过滤结果展开 v-treeview [英] Expand v-treeview based on filtered results
本文介绍了根据过滤结果展开 v-treeview的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在树视图组件中，我想打开所有有搜索文本的节点.但预期并未发生.
所需的输出:打开有一些搜索文本的所有父项.这是相同的代码笔.
https://codepen.io/anon/pen/MdxPKN?&编辑=101
<v-container grid-list-md><v-layout wrap><v-flex xs6><v-text-field label="search" v-model="search" box/><v-treeview :items="tree":search="搜索"active-class="grey lighten-4 indigo--text"项目键=名称"点击打开:open-all="{searchLength}>0?true:false"可悬停/></v-flex></v-layout></v-容器> 解决方案
我稍微修改了 totalhack 的解决方案以获得我想要的.基本上，如果搜索框中有一个字符串，我会调用 updateAll(true).
<v-card><v-card-title>文件打开</v-card-title><v-sheet class=pl-4 pr-4"><v-文本字段标签=搜索"v-model=搜索"@input="handleSearch";平坦的单反隐藏细节可清除clear-icon="mdi-close-circle-outline";></v-text-field></v-sheet><v-card-text><v-容器><v-treeviewref=树":items="树":search="搜索"点击打开返回对象可激活的稠密><template v-slot:prepend="{ item, open }"><v-icon v-if="!item.file">{{ 打开 ?'mdi-文件夹-打开':'mdi-文件夹'}}</v-图标><v-icon v-else>{{ 'mdi-language-ruby' }}</v-图标></template></v-treeview></v-容器></v-card-text><v-card-actions><v-btn color="primary";text @click="open()">Ok</v-btn><v-间隔></v-间隔><v-btn color="primary";text @click="show = false">取消</v-btn></v-card-actions></v-card></模板><脚本>导出默认{数据() {返回 {树: []，搜索:空，}},方法: {句柄搜索(输入){如果(输入){this.$refs.tree.updateAll(true)} 别的 {this.$refs.tree.updateAll(false)}},},}In the tree view component, I would like to open all the nodes where there is some search text. But the expected is not happening.
Desired output: Open all the parents where there's some search text. Here's the codepen for the same.
https://codepen.io/anon/pen/MdxPKN?&editors=101
<div id="app">
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs6>
<v-text-field label="search" v-model="search" box />
<v-treeview :items="tree"
:search="search"
active-class="grey lighten-4 indigo--text"
item-key="name"
open-on-click
:open-all="{searchLength}>0?true:false"
hoverable />
</v-flex>
</v-layout>
</v-container>
</div>
解决方案
I modified totalhack's solution slightly to get what I wanted. Basically if there is a string in the search box I call updateAll(true).
<template>
<v-card>
<v-card-title>File Open</v-card-title>
<v-sheet class="pl-4 pr-4">
<v-text-field
label="Search"
v-model="search"
@input="handleSearch"
flat
solo-inverted
hide-details
clearable
clear-icon="mdi-close-circle-outline"
></v-text-field>
</v-sheet>
<v-card-text>
<v-container>
<v-treeview
ref="tree"
:items="tree"
:search="search"
open-on-click
return-object
activatable
dense
>
<template v-slot:prepend="{ item, open }">
<v-icon v-if="!item.file">
{{ open ? 'mdi-folder-open' : 'mdi-folder' }}
</v-icon>
<v-icon v-else>
{{ 'mdi-language-ruby' }}
</v-icon>
</template></v-treeview>
</v-container>
</v-card-text>
<v-card-actions>
<v-btn color="primary" text @click="open()">Ok</v-btn>
<v-spacer></v-spacer>
<v-btn color="primary" text @click="show = false">Cancel</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
data() {
return {
tree: [],
search: null,
}
},
methods: {
handleSearch(input) {
if (input) {
this.$refs.tree.updateAll(true)
} else {
this.$refs.tree.updateAll(false)
}
},
},
}
</script>
这篇关于根据过滤结果展开 v-treeview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
