时间戳

首页 > 解决方案 > 根据过滤结果展开 v-treeview

vuejs2 - 根据过滤结果展开 v-treeview

问题描述

在树视图组件中，我想打开所有有一些搜索文本的节点。但预期并没有发生。

期望的输出：打开所有有搜索文本的父母。 在此处输入图像描述 这是相同的代码笔。

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>

标签： vuejs2vuetify.js

解决方案

所以它有点棘手，你不能使用内置的搜索功能，但有一个可以接受的简单解决方法。

您基本上必须自己实现过滤器，只需将您需要的项目发送到v-treeview.

然后，您可以从您的过滤元素创建另一个计算属性，该属性只返回key并将其传递给.:opentreeview

为你制作了一个codepen。

https://codepen.io/brafols/pen/XwGQov

推荐阅读