Оценить поведение поиска в виде дерева - PullRequest
Новая
       15

Оценить поведение поиска в виде дерева

0 голосов
/ 08 января 2019

Привет и с Новым годом, ребята,

Снова я спрашиваю о поиске 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» отображается только «Приложение -> Календарь». До сих пор это то, что я хочу.

Но когда я выбираю Календарь, также выбирается «Приложение»; и когда я очищаю фильтр, все дочерние элементы приложения также выбираются. И я хотел бы выбрать «Календарь», и когда я очищаю, я не хочу, чтобы его братья и сестры были выбраны.

Спасибо, что прочитали

...