Question

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

我在使用最新版本的vuetify的vue.js 我在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' }
    ]
  }
]
  })
})

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

我想念孩子的状况

有没有一种方法可以过滤我们的树显示的内容？

1 个答案: