有没有办法过滤我们的树显示的内容？答案

【问题标题】：Is there a way to filter what our tree is displaying?有没有办法过滤我们的树显示的内容？
【发布时间】：2018-12-20 13:41:45
【问题描述】：

我想知道是否有一种方法可以过滤我们在 V-treeview 中看到的内容。在过滤器字段输入中，我们键入树元素的键的开头，然后树将只向我们显示其键以我们在过滤器字段输入中键入的内容开头的元素。

我在 vue.js 上，使用最新版本的 vuetify 我已经在vuetify页面上搜索过，但我还没有找到 https://vuetifyjs.com/en/components/treeview

剩下的两个问题：我只能过滤我的树形视图以获得一个子级深度。我的孩子的孩子不能被过滤。（在 codepen 示例中检查日历的子项）而且，当我匹配一个孩子时，其他节点并没有隐藏。

Codepen updated

HTML

<div id="app">
  <v-app id="inspire">
    <v-treeview   :selectable="true"
      :items="items"></v-treeview>
  </v-app>
</div>

 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' }
    ]
  }
]
  })
})

【问题讨论】：

标签： javascript vue.js treeview vuetify.js

【解决方案1】：

我使用了this post中的这个函数

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;
          }
      });

我错过了孩子们的情况

【讨论】：