Question

大家好，新年快乐！

我再次询问有关v-treeview搜索的问题。当我进行过滤时，行为无法令我满意。

我将vuetify的版本更新为1.4.0。我正在使用vue 2.5.15

https://codepen.io/anon/pen/PXeMmy?&editors=101

HTML

<div id="app">
  <v-container grid-list-md>
    <v-layout wrap>
      <v-flex xs6>
     <!-- Search Field -->
    <v-text-field label="search" v-model="search" box>
      </v-text-field>
  <!-- Treeview -->
  <v-treeview :items="filteredTree"
              v-model="selected"
                active-class="grey lighten-4 indigo--text"
              item-key="name"
                selected-color="blue"
                selectable
                hoverable>
    </v-treeview>
        </v-flex>
      <v-flex xs6>
        <v-chip v-for="(s , i) in selected" :key="i">
          {{s}}
        </v-chip>
        </v-flex>
      </v-layout>
    </v-container>
</div>

JS：

new Vue({
  el: '#app',
  data(){
    return{
      search: '',
      tree: [
        {
          id: 1,
          name: 'Applications',
          children: [
            { id: 2, name: 'Calendar' },
            { id: 3, name: 'Chrome' },
            { id: 4, name: 'Webstorm' }
          ]
        },
        {
          id: 5,
          name: 'Languages',
          children: [
            { id: 6, name: 'English' },
            { id: 7, name: 'French' },
            { id: 8, name: 'Spannish' }
          ]
        }

      ],
      selected: []
    }
  },
  computed:{
    filteredTree: {
       get: function() {
        let regexp = new RegExp(this.search, "i")
        return this.filterTree(this.tree, regexp) || []
      },
    },
   },
   methods: {
    filterTree: function(tree, filter) {
      if (!Array.isArray(tree)) return null
      return JSON.parse(JSON.stringify(tree)).filter(function matchName(o) {
        let temp;
        if (o.name.match(filter)) {
          return true;
        }
        if (!Array.isArray(o.children)) {
          return false;
        }
        temp = o.children.filter(matchName);
        if (temp.length) {
          o.children = temp;
          return true;
        }
      });
  }
   }
})

在此示例中，当我搜索“ Calen”时，仅“ Application-> Calendar”可见。到现在为止，这就是我想要的。

但是，当我选择“日历”时，也会选择“应用程序”；当我清除过滤器时，也会选择“应用程序”的所有子级。而且我想选择“日历”，当我清除时，我不想选择其同级。

感谢您阅读

Vuetify Treeview搜索行为

0 个答案: